<rsp stat="ok">
<feed id="fhphjt61bueu08k93ehujpu234" uri="vahidnasiri">
<entry date="2009-01-23" circulation="153" hits="276" reach="10"/>
</feed>
</rsp>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FeedBurner API</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'>
</script>
<script type="text/javascript">
function parseXml(xml){
//find every entry and print the circulation
$(xml).find("entry").each(function(){
$("#output").append($(this).attr("circulation"));
});
}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "GetFeedData_local.xml",
dataType: "xml",
success: parseXml
});
});
</script>
</head>
<body>
<div dir="rtl" style="font-family:tahoma; font-size:12px;">
تعداد مشترکین تغذیه خبری سایت:
<div id="output">
</div>
</div>
</body>
</html>
@using(Ajax.BeginForm(MVC.Post.ActionNames.New ,
MVC.Post.Name,
new AjaxOptions(){
HttpMethod = "Post" ,
Confirm ="$.prompt('درخواست تایید - موافقید ؟',{prefix: 'dnt',buttons: { 'تایید': true, 'انصراف': false }});" })) @using(Ajax.BeginForm(MVC.Post.ActionNames.New ,
MVC.Post.Name,
new AjaxOptions(){
HttpMethod = "Post" ,
OnSuccess = "var noty = window.noty({ text: 'نظر شما ثبت شد بعد از تایید نمایش داده میشود', type: 'success', layout: 'center', timeout: 4000 });"
})) | توضیح | انتخاب کننده |
| عناصری را انتخاب می‌کند که تحت کنترل انیمیشن می‌باشند. در پست‌های بعدی انیمیشن‌ها توضیح داده می‌شوند. | animated: |
| عناصر دکمه را انتخاب می‌کند، عناصری مانند (input[type=submit]، input[type=reset]، input[type=button]، یا button) | button: |
| عناصر Checkbox را انتخاب می‌کند، مانند ([input[type=checkbox). | checkbox: |
| عناصر checkboxها یا دکمه‌های رادیویی را انتخاب می‌کند که در حالت انتخاب باشند. | checked: |
| عناصری ر انتخاب می‌کند که دارای عبارت foo باشند. | contains(foo) //c: |
| عناصر در حالت disabled را انتخاب می‌کند. | disabled: |
| عناصر در حالت enabledرا انتخاب می‌کند. | enabled: |
| عناصر فایل را انتخاب می‌کند، مانند ([input[type=file). | file: |
| عناصر هدر مانند h1 تا h6 را انتخاب می‌کند. | header: |
| عناصر مخفی شده را انتهاب می‌کند. | hidden: |
| عناصر تصویر را انتخاب می‌کند، مانند ([input[type=image). | image: |
| عناصر فرم مانند input ، select، textarea، button را انتخاب می‌کند. | input: |
| انتخاب کننده‌ها را برعکس می‌کند. | not(filter)//c: |
| عناصری که فرزندی دارند را انتخاب می‌کند. | parent: |
| عناصر password را انتخاب می‌کند، مانند ([input[type=password). | password: |
| عناصر radio را انتخاب می‌کند، مانند ([input[type=radio). | radio: |
| دکمه‌های reset را انتخاب می‌کند، مانند ([input[type=reset یا [button[type=reset). | raset: |
| عناصری (عناصر option) را انتخاب می‌کند که در وضعیت selected قراردارند. | selected: |
| دکمه‌های submit را انتخاب می‌کند، مانند ([input[type=submit یا [button[type=submit). | submit: |
| عناصر text را انتخاب می‌کند، مانند ([input[type=text). | text: |
| عناصری را که در وضعیت visibleباشند انتخاب می‌کند. | visible: |
:checkbox:checked:enabled
input:not(:checkbox)
div span
div:has(span)
$('tr:has(img[src$="foo.png"])')$.trim(someString);
jQuery.trim(someString);
window.onload = function() {
$("table tr:nth-child(even)").addClass("even");
};$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});$(function() {
$("table tr:nth-child(even)").addClass("even");
});$("<p>Hi there!</p>")<html>
<head>
<title>Follow me!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.js"></script>
<script type="text/javascript">
// در زمان Reday بودن صفحه عنصر مورد نظر ایجاد میشود
$(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});
</script>
</head>
<body>
<p id="followMe">Follow me!</p>
</body>
</html>
موفق وموید باشید
بر اساس آموزش مدیریت حالت در Blazor، قصد داریم یک سرویس پیام هشدار ساده، ولی زیبا را بوسیله کامپوننت Alert بوت استرپ ۵ ، بدون استفاده از توابع جاوا اسکریپتی، طراحی کنیم.
در ابتدا کتابخانه‌های css زیر را بوسیله LibMan به پروژه اضافه کرده و مداخل فایل‌های را css نیز اضافه میکنیم:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"provider": "unpkg",
"library": "bootstrap@5.0.0",
"destination": "wwwroot/lib/bootstrap"
},
{
"provider": "unpkg",
"library": "open-iconic@1.1.1",
"destination": "wwwroot/lib/open-iconic"
},
{
"provider": "unpkg",
"library": "animate.css@4.1.1",
"destination": "wwwroot/lib/animate"
},
{
"provider": "unpkg",
"library": "bootstrap-icons@1.5.0",
"destination": "wwwroot/lib/bootstrap-icons/"
}
]
} public enum AlertType
{
Success,
Info,
Danger,
Warning
}
public class AlertService
{
public void ShowAlert(string message, AlertType alertType, string animate = "animate__fadeIn")
{
OnChange?.Invoke(message, alertType,animate);
}
public event Action<string,AlertType, string> OnChange;
} services.AddScoped<AlertService>();
توضیحات:
در کدهای نهایی برنامه قرار است به این نحو کار نمایش Alertها را در کامپوننت‌های مختلف انجام دهیم:
@inject AlertService AlertService
@code {
private void Success()
{
AlertService.ShowAlert("Success!", AlertType.Success);
} کدهای کامپوننت Alert.razor
@inject AlertService AlertService
@implements IDisposable
<style>
.alert-show {
display: flex;
flex-direction: row;
}
.alert-hide {
display: none;
}
</style>
<div style="z-index: 5">
<div " + "alert-show" :"alert-hide")">
<i width="24" height="24"></i>
<div>
@Message
</div>
<button type="button" data-bs-dismiss="alert" aria-label="Close" @onclick="CloseClick"></button>
</div>
</div>
@code {
AlertType AlertType { get; set; }
string Icon { get; set; }
string Css { get; set; }
string Animation { get; set; }
private bool IsVisible { get; set; }
private string Message { get; set; }
System.Timers.Timer _alertTimeOutTimer;
protected override void OnInitialized()
{
AlertService.OnChange += ShowAlert;
}
private void ShowAlert(string message, AlertType alertType, string animate)
{
_alertTimeOutTimer = new System.Timers.Timer
{
Interval = 5000,
Enabled = true,
AutoReset = false
};
_alertTimeOutTimer.Elapsed += HideAlert;
Message = message;
switch (alertType)
{
case AlertType.Success:
Css = "bg-success";
Icon = "bi-check-circle";
break;
case AlertType.Info:
Css = "bg-info";
Icon = "bi-info-circle-fill";
break;
case AlertType.Danger:
Css = "bg-danger";
Icon = "bi-exclamation-circle";
break;
case AlertType.Warning:
Css = "bg-warning";
Icon = "bi-exclamation-triangle-fill";
break;
default:
Css = Css;
break;
}
AlertType = alertType;
Animation = animate;
IsVisible = true;
InvokeAsync(StateHasChanged);
}
private void HideAlert(Object source, System.Timers.ElapsedEventArgs e)
{
IsVisible = false;
InvokeAsync(StateHasChanged);
_alertTimeOutTimer.Close();
}
public void Dispose()
{
if (AlertService != null) AlertService.OnChange -= ShowAlert;
if (_alertTimeOutTimer != null)
{
_alertTimeOutTimer.Elapsed -= HideAlert;
_alertTimeOutTimer?.Dispose();
}
}
private void CloseClick()
{
IsVisible = false;
_alertTimeOutTimer.Close();
InvokeAsync(StateHasChanged);
}
} <div>
<Alert></Alert> 
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
InitializeDisplayModeProvider();
}
protected void InitializeDisplayModeProvider()
{
var phone = new DefaultDisplayMode("Phone")
{
ContextCondition = ctx => ctx.GetOverriddenUserAgent() != null &&
ctx.GetOverriddenUserAgent().Contains("iPhone")
};
var mobile = new DefaultDisplayMode("Tablet")
{
ContextCondition = ctx => ctx.GetOverriddenUserAgent() != null &&
ctx.GetOverriddenUserAgent().Contains("iPad")
};
DisplayModeProvider.Instance.Modes.Insert(0, phone);
DisplayModeProvider.Instance.Modes.Insert(1, mobile);
} 
.container-full {
margin: 0 auto;
width: 100%;
} <div class="container-full"> اطلاعات اصلی سایت </div>