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

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

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

JqueryUI - Show

این فصل به بررسی متد show() خواهد پرداخت که یکی از متودهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد show() یک آیتم را با استفاده از افکت نمایش داده شده، نشان می دهد.
متود show() حالت بصری عناصر در هم پیچیده را با استفاده از افکت تعیین شده، تغییر وضعیت می دهد.


ترکیب

متود show() دارای ترکیب زیر است:


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

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

افکت های jQueryUI

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


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

مثال زیر استفاده از متود show() را توضیح می دهد.
این مثال استفاده از متود show() را با افکت shake توضیح می دهد.




 
 
 


 
jQuery UI show Example




      


   

Show

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Run Effect

اجازه بدهید کد بالا را در فایل HTML به نام showexample.htm ذخیره کرده و آن را در یک مروگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید خروجی زیر را مشاهده کنید، اکنون می توانید با نتیجه بازی کنید:


Run Effect

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


نمایش با افکت Blind

مثال زیر استفاده از متود show() را با افکت child توضیح می دهد.


                            



                            
                            

                            jQuery UI show Example
                            

                            
                            
      
                            
                            
   
                            
                            

Show

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Run Effect

اجازه بدهید کد بالا را در فایل HTML به نام showexample.htm ذخیره کرده و آن را در یک مروگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید خروجی زیر را مشاهده کنید، اکنون می توانید با نتیجه بازی کنید:


Run Effect

  • 1711
  •    710
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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