سلام دوستان عزیز ، امیدوارم که خوب باشید و سلامت و با اموزش امروز ما همراه باشید. امروز میخوام در مورد متد Add Class در Jquery UI باهم آموزش داشته باشیم.

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!