همراهان گرامی سلام ف امیدوارم که حال شما خوب باشه وهمچنان با اموزشهای امروز ما همراه باشید. در این بخش به بررسی متد 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

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

Toggle

روی دکمه ی Toggle کلیک کنید تا چگونگی نمایش داده شدن یا پنهان شدن گروه ها را مشاهده کنید.