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

آموزش متد Effect در JqueryUI

دوره های مرتبط با این مقاله

JqueryUI - Effect

این فصل در مورد متد effect() بحث خواهد کرد که یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد یک jQueryUI انیمیشن را برای برای عناصری به کار می گیرد که نیازی به نمایش دادن یا پنهان کردن آن نیست.


ترکیب

متد effect() دارای ترکیب زیر می باشد:


effect( effect [, options ] [, duration ] [, complete ] ) 

Parameter
Description
effect
این پارامتر، رشته ای است که افکتی را نمایش می دهد که برای تغییر استفاده می شود.
options
این پارامتر از نوع Object است و تنظیمات خاص افکت و easing را نشان می دهد. علاوه بر این هر افکت دارای مجموعه گزینه های خود می باشد که می تواند در بین چند افکت در جدول افکت های jQueryUI به عنوان افکت مشترک تعیین شود.
duration
این پارامتر از نوع عدد یا رشته می باشد و عدد مربوطبه زمان افکت را به هزارم ثانیه نشان می دهد. مقدار پیش فرض آن 400 است.
complete
وقتی که افکت برای یک عنصر کامل می شود، این یک متد کال بک برای آن عنصر میباشد.

افکت های jQueryUI

جدول زیر افکت های مختلفی را توصیف می کند که با متد effects() استفاده می شوند.


Effect
Description
blind
این افکت عنصر را به شیوه ی پنجره ی کور نشان می دهد یا پنهان می کند: با حرکت بالا و پایین پایینی و یا راست و چپ، بسته به مسیر و سبک تعیین شده.
bounce
باعث می شود که عنصر در حالت پرش در یک مسیر افقی یا عمودی ظاهر شود، که عنصر را به طور انتخابی پنهان کرده و یا نمایان می سازد.
clip
با حرکت مرزهای روبه روی عنصر با یکدیگر، عنصر را پنهان کرده یا نمایان می سازد تا اینکه مرزها در وسط به یکدیگر برسند.
drop
عنصر را تنظیم می کند که طوری به نظر برسد که انگار روی صفحه یا از صفحه رها شده است، به این ترتیب آن را پنهان کرده یا نمایان می کند.
explode
با تقسیم عنصر به قطعات مختلف که در مسیرهای شعاعی حرکت می کند، انگار که روی صفحه و یا از صفحه پخش می شود، آن را پنهان می کند یا نمایش می دهد.
fade
با تنظیم میزان کدری عنصر، آن را پنهان یا آشکار می کند، درست مانند افکت های محو مرکزی عمل می کند، اما بدون گزینه.
fold
با تنظیم مرزها به داخل و یا خارج، عنصر را نمایش داده و یا پنهان می کند، سپس همین کار را برای مجموعه ی دیگری از مرزها انجام می دهد.
highlight
با تغییر لحظه ای رنگ زمینه، توجه را به سمت عنصر فرا می خواند و عنصر را پنهان کرده و یا نمایش می دهد.
puff
با تنظیم میزان کدری عنصر، آن را در جای خود باز کرده و یا می بندد.
pulsate
قبل از اینکه اطمینان حاصل کند که عنصر همانطور که تعیین شده، نمایش داده می شود یا پنهان می شود، میزان کدری عنصر را تنظیم می کند.
scale
عنصر را با یک درصد خاص باز کرده و یا می بندد.
shake
عنصر را به عقب و جلو ، افقی یا عمودی، حرکت می دهد.
size
طول و عرض عنصر را به مقدار مشخصی تغییر می دهد. مانند مقیاس، به جز اینکه چطور اندازه ی مورد هدف تعیین شده باشد.
slide
عنصر را طوری جابه جا می کند که به نظر می رسد روی صفحه یا خارج صفحه اسلاید شده است.
transfer
یک عنصر موقت اوت لاین را محرک سازی می کند که باعث می شود عنصر به عنصری دیگر منتقل شود. ظاهر عنصر اوت لاین باید از طریق قوانین CSS برای گروه ui-effects-transfer تعریف شود یا گروه به عنوان یک گزینه تعیین شود.
مثال:

مثال زیر استفاده از متد effect() را با افکت های مختلف لیست شده در جدول بالا توضیح می دهد:


افکت – حرکت

< !doctype html>

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

                        < title>jQuery UI effect Exampletitle>
                        < 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>

        #box-1 {

                                height: 100px;

                                width: 100px;

                                background: #b9cd6d;

        }

                            < style>

                                < script>

                                    $(document).ready(function () {

                                        $('#box-1').click(function () {

                                            $("#box-1").effect("shake", {

                                                times: 10,

                                                distance: 100

                                            }, 3000, function () {

                                                $(this).css("background", "#cccccc");

                                            });

                                        });

                                    });

                            script>

                        head>

                        < body>

                            < div id="box-1">Click On Mediv>

                        body>

                        html>

افکت – انفجار

< !doctype html>

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

                        < title>jQuery UI effect Exampletitle>
                        < 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>

        #box-2 {

                                height: 100px;

                                width: 100px;

                                background: #b9cd6d;

        }

                            style>

                            < script>

                                $(document).ready(function () {

                                    $('#box-2').click(function () {

                                        $("#box-2").effect({

                                            effect: "explode",

                                            easing: "easeInExpo",

                                            pieces: 4,

                                            duration: 5000

                                        });

                                    });

                                });

                            script>

                        head>

                        < body>

                            < div id="box-2">div>

                        body>

                        html>

  • 1328
  •    774
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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