آموزش متد Show در JqueryUI
سلام عزیزان و همراهان گرامی، امیدوارم که خوب و سرحال با این آموزش ما هم همراه باشید در مورد متد show براتون مطلبی را اماده کردم پس با ما همراه بمانید.
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 است و طول مدت اجرای انیمیشن را تعیین خواهد کرد. مقدار پیش فرض آن ۴۰۰ است.
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 توضیح می دهد.
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
$(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$( “#effect” ).show( “shake”, {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( “#effect:visible” ).removeAttr( “style” ).fadeOut();
}, ۱۰۰۰ );
};
$( “#button” ).click(function() {
runEffect();
return false;
});
$( “#effect” ).hide();
});
اجازه بدهید کد بالا را در فایل HTML به نام showexample.htm ذخیره کرده و آن را در یک مروگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید خروجی زیر را مشاهده کنید، اکنون می توانید با نتیجه بازی کنید:
Run Effect
روی دکمه های Add Class و Remove Class کلیک کنید تا افکت گروه ها را روی باکس مشاهده کنید.
نمایش با افکت Blind:
مثال زیر استفاده از متود show() را با افکت child توضیح می دهد.
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
$(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$( “#effect” ).show( “blind”, {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( “#effect:visible” ).removeAttr( “style” ).fadeOut();
}, ۱۰۰۰ );
};
// set effect from select menu value
$( “#button” ).click(function() {
runEffect();
return false;
});
$( “#effect” ).hide();
});
اجازه بدهید کد بالا را در فایل HTML به نام showexample.htm ذخیره کرده و آن را در یک مروگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید خروجی زیر را مشاهده کنید، اکنون می توانید با نتیجه بازی کنید:
