سلام دوستان گرامی ، صبحتون بخیر باشه، امیدوارم که روز خوبی را درپیش رو داشته باشید و از آموزشهایی که امروز درابطه با jquery براتون آماده کردیم براتون مناسب باشه.
JqueryUI – Switch Class
این فصل به بررسی متد switchClass() خواهد پرداخت که یک گروه جدید و مفید برای اصلاح متد switchClass() است، برای جابه جایی از یک گروه CSS به گروه دیگر و محرک سازی از یک وضعیت به وضعیت دیگر.
ترکیب:
افزوده شده به ورژن ۱٫۰ از jQueryUI
متد switchClass() دارای ترکیب اصلی زیر می باشد:
switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Parameter
Description
removeClassName
این پارامتر یک String است که نام CCS گروه یا لیست space-delimited از نام های گروه را نشان می دهد که باید اضافه شده، حذف شده و یا troggle شوند.
addClassName
از نوع String است و نام یک یا چند گروه را ارائه می دهد ( که با فاصله از یکدیگر مجزا شده اند)، گروه هایی که قرار است به گروه هماهنگ شده با هر عنصر افزوده شوند.
duration
از نوع Number یا String است و به طور انتخابی طول دوره ی افکت را slow، normal، fast یا به هزارم ثانیه نشان می دهد. اگر حذف شود، متد animate() پیش فرض را تعیین می کند. مقدار پیش فرض آن ۴۰۰ است.
easing
نام عملکرد easing که به متد animate() منتقل می شود.
complete
یک متد بازگشتی است که وقتی متد برای یک عنصر کامل می شود، برای آن عنصر فراخوانده می شود.
افزوده شده به ورژن ۱٫۹ از jQueryUI
با ورژن ۱٫۹، این متد گزینه ی Children را پشتیبانی می کند که همچنین عناصر بعدی را نیز متحرک سازی خواهد کرد.
switchClass( removeClassName, addClassName [, options ] )
Parameter
Description
removeClassName
این پارامتر یک String است که نام گروه CSS یا لیست فضای محدود از نام گروه (space-delimited list) که باید به آن اضافه شود، حذف شود یا toggle شود، را نشان می دهد.
addClassName
از نوع String است و نام یک یا چند گروه را ارائه می دهد ( که با فاصله از یکدیگر مجزا شده اند)، گروه هایی که قرار است به گروه هماهنگ شده با هر عنصر افزوده شوند.
options
این پارامتر همه ی تنظیمات مربوط به انیمیشن را نشان می دهد. همه ی پراپرتی ها انتخابی هستند. مقادیر ممکن عبارتند از:
duration: از نوع Number یا String می باشد و زمان اجرای انیمیشن را تعیین می کند. مقدار پیش فرض آن ۴۰۰ است.
easing: یک string است که عملکرد را برای استفاده برای تغییر آسان می کند. مقدار پیش فرض آن swing است.
complete: یک متد بازگشتی است که هنگامی که افکت برای یک عنصر کامل است، برای هر عنصر فراخوانده می شود.
children: از نوع Boolean است و نشان می دهد که آیا انیمیشن باید به طور اضافه برای همه ی عناصر هماهنگ شده ی بعدی، به کار گرفته شود.
queue: از نوع Boolean یا String است و نشان می دهد که آیا انیمیشن را در ردیف افکت ها قرار دهیم.
مثال:
مثال زیر استفاده از متد switchClass() را توضیح می دهد:
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
$(function () {
$(‘#btnSwitch’).click(function () {
$(“.NormalClass”).switchClass(“NormalClass”, “LargeClass”, ‘fast’);
$(“.LargeClass”).switchClass(“LargeClass”, “NormalClass”, ‘fast’);
return false;
});
});
Tutorials Point Rocks!!!
Welcome to Tutorials Point!!!
بر روی دکمه ی Switch Class کلیک کنید تا افکت گروه ها را روی باکس مشاهده کنید.
