همراهان گرامی سلام ف امیدوارم که حال شما خوب باشه وهمچنان با اموزشهای امروز ما همراه باشید. در این بخش به بررسی متد toggle() از افکت های بصری jQueryUI خواهیم پرداخت. متد toggle() متدهای show () یا hide () را با هم تغییر می دهد، بستگی به این دارد که آیا عنصر پنهان شده یا نه.
ترکیب:
متد toggle() دارای ترکیب زیر می باشد:
toggle( effect [, options ] [, duration ] [, complete ] )
Parameter
Description
effect
این پارامتر یک 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
Animates a transient outline element that makes the element appear to transfer to another element. The appearance of the outline element must be defined via CSS rules for the ui-effects-transfer class, or the class specified as an option.
مثال:
مثال زیر استفاده از متد toggle() را با افکت های مختلف لیست شده در جدول بالا توضیح می دهد:
.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 () {
function runEffect() {
$(“#effect”).toggle(‘explode’, 300);
};
$(“#button”).click(function () {
runEffect();
return false;
});
});
روی دکمه ی Toggle کلیک کنید تا چگونگی نمایش داده شدن یا پنهان شدن گروه ها را مشاهده کنید.
