آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش متد 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 می باشد و تعداد ثانیه های افکت را نشان می دهد. مقدار 0 مستقیما و بدون پیشرفت، عنصر را وارد استایل جدید می کند. مقدار پیش فرض آن 400 است.
easing
از نوع String می باشد و رویه ی پیشروی در افکت را نشان می دهد. مقدار پیش فرض آن swing است.
complete
یک متود کال بک است که زمانیکه افکت برای یک عنصر کامل شود، برای آن عنصر فراخوانده می شود.

افزوده شده به ورژن 1.9 از jQueryUI

با ورژن 1.9 این متود گزینه ی children را پشتیبانی می کند که عناصر بعدی را نیز متحرک سازی می کند.


addClass( className [, options ] )

Parameter
Description
className
یک رشته می باشد که حاوی یک یا چند گروه CSS است ( به وسیله ی فاصله از یکدیگر مجزا می شوند.)
options
همه ی رشته های انیمیشن را نمایش می دهد. همه ی پراپرتی ها انتخابی هستند. مقادیر ممکن عبارتند از: Duration : از نوع number یا string می باشد و مدت زمان افکت را نشان می دهد. مقدار 0 مستقیما و بدون پیشرفت، عنصر را وارد استایل جدید می کند. مقدار پیش فرض آن 400 است. Easing: از نوع String می باشد و رویه ی پیشروی در افکت را نشان می دهد. مقدار پیش فرض آن swing است. Complete: یک متود کال بک است که زمانیکه افکت برای یک عنصر کامل شود، برای آن عنصر فراخوانده می شود. از نوع Boolean است و تعیین می کند که آیا انیمیشن باید برای همه ی عناصر بعدی از عنصر هماهنگ شده، به کار گرفته شود. مقدار پیش فرض آن false است. Queue: از نوع Boolean یا String است و نشان می دهد که آیا انیمیشن را در افکت های queue قرار دهیم یا نه. مقدار پیش فرض آن true است.
مثال:

مثال زیر استفاده از متودهای addClass() را توضیح می دهد:
انتقال یک گروه مجزا:


< !DOCTYPE html>

< html>
< head>
< meta charset="utf-8">

< title>jQuery UI addClass Example< /title>
< link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

< script src="http://code.jquery.com/jquery-1.10.2.js">< /script>
< script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< /script>
< style>
    .elemClass {
        width: 200px;
        height: 50px;
        background-color: #b9cd6d;
    }

    .myClass {
        font-size: 40px;
        background-color: #ccc;
        color: white;
    }
< /style>
< script type="text/javascript">

    $(document).ready(function () {

        $('.button').click(function () {

            if (this.id == "add") {

                $('#animTarget').addClass("myClass", "fast")

            } else {

                $('#animTarget').removeClass("myClass", "fast")

            }

        })

    });

< /script>
< /head>
< body>
< div id=animTarget class="elemClass">
Hello!
< /div>
< button class="button" id="add">Add Class< /button>
< button class="button" id="remove">Remove Class< /button>
< /body>
< /html>

روی دکمه های Add Class و Remove Class کلیک کنید تا افکت گروه ها را روی باکس ها مشاهده کنید.


انتقال چند گروه:

این مثال انتقال چند گروه را به متود addClass نشان می دهد:


< !doctype html>

< html lang="en">
< head>
< meta charset="utf-8">

< title>jQuery UI addClass Example< /title>
< link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

< script src="http://code.jquery.com/jquery-1.10.2.js">< /script>
< script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< /script>

< style>
    .red {
        color: red;
    }

    .big {
        font-size: 5em;
    }

    .spaced {
        padding: 1em;
    }
< /style>
<  script>

    $(document).ready(function () {

        $('.button-1').click(function () {

            $("#welcome").addClass("red big spaced", 3000);

        });

    });

< /script>
< /head>
< body>
< p id="welcome">Welcome to Tutorials Point!< /p>
< button class="button-1">Click me< /button>
< /body>
< /html>

  • 1409
  •    738
  • تاریخ ارسال :   1394/07/28

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .