سلام دوستان عزیز ، امیدوارم که حال همگی شماخوب باشه و تا به اینجا از اموزشهای ما راضی بوده باشید.
JqueryUI – Add Class
این بخش متد addClass() را توضیح می دهد که یکی ازمتدهایی است که برای مدیریت افکت های بصری jQueryUI استفاده می شود. متود addClass() امکان متحرک سازی تغییرات را برای پراپرتی های CSS فراهم می کند.
متود addClass() گروه های خاصی را به عناصر هماهنگ شده اضافه می کند، در حالیکه همه ی تغییرات استایل را متحرک سازی می کند.
متد addClass() دارای ترکیب اصلی خود به شکل زیر می باشد:
addClass( className [, duration ] [, easing ] [, complete ] )
Parameter
Description
className
رشته ای حاوی یک یا چند گروه CSS است (به وسیله ی فاصله از یکدیگر مجزا شده اند.)
duration
از نوع Number یا String می باشد و تعداد ثانیه های افکت را نشان می دهد. مقدار ۰ مستقیما و بدون پیشرفت، عنصر را وارد استایل جدید می کند. مقدار پیش فرض آن ۴۰۰ است.
easing
از نوع String می باشد و رویه ی پیشروی در افکت را نشان می دهد. مقدار پیش فرض آن swing است.
complete
یک متود کال بک است که زمانیکه افکت برای یک عنصر کامل شود، برای آن عنصر فراخوانده می شود.
افزوده شده به ورژن ۱٫۹ از jQueryUI:
با ورژن ۱٫۹ این متود گزینه ی children را پشتیبانی می کند که عناصر بعدی را نیز متحرک سازی می کند.
addClass( className [, options ] )
Parameter
Description
className
یک رشته می باشد که حاوی یک یا چند گروه CSS است ( به وسیله ی فاصله از یکدیگر مجزا می شوند.)
options
همه ی رشته های انیمیشن را نمایش می دهد. همه ی پراپرتی ها انتخابی هستند. مقادیر ممکن عبارتند از:
Duration : از نوع number یا string می باشد و مدت زمان افکت را نشان می دهد. مقدار ۰ مستقیما و بدون پیشرفت، عنصر را وارد استایل جدید می کند. مقدار پیش فرض آن ۴۰۰ است.
Easing: از نوع String می باشد و رویه ی پیشروی در افکت را نشان می دهد. مقدار پیش فرض آن swing است.
Complete: یک متود کال بک است که زمانیکه افکت برای یک عنصر کامل شود، برای آن عنصر فراخوانده می شود.
از نوع Boolean است و تعیین می کند که آیا انیمیشن باید برای همه ی عناصر بعدی از عنصر هماهنگ شده، به کار گرفته شود. مقدار پیش فرض آن false است.
Queue: از نوع Boolean یا String است و نشان می دهد که آیا انیمیشن را در افکت های queue قرار دهیم یا نه. مقدار پیش فرض آن true است.
مثال: مثال زیر استفاده از متودهای addClass() را توضیح می دهد:
انتقال یک گروه مجزا:
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px;
background-color: #ccc;
color: white;
}
$(document).ready(function () {
$(‘.button’).click(function () {
if (this.id == “add”) {
$(‘#animTarget’).addClass(“myClass”, “fast”)
} else {
$(‘#animTarget’).removeClass(“myClass”, “fast”)
}
})
});
Hello!
روی دکمه های Add Class و Remove Class کلیک کنید تا افکت گروه ها را روی باکس ها مشاهده کنید.
انتقال چند گروه:
این مثال انتقال چند گروه را به متود addClass نشان می دهد:
.red {
color: red;
}
.big {
font-size: 5em;
}
.spaced {
padding: 1em;
}
$(document).ready(function () {
$(‘.button-1’).click(function () {
$(“#welcome”).addClass(“red big spaced”, 3000);
});
});
Welcome to Tutorials Point!