همراهان عزیز و وب مستران گرامی با اموزشهای ما که در زمینه طراحی وب سایت امیدوارم همراه بمانید و از ان استفاده لازم راببرید. در این بخش به آموزش متد Hide در Jquery UI میپردازیم
این فصل به متد hide() خواهد پرداخت که یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد effect() یک افکت انیمیشنی برای پنهان کردن عناصر به کار می برد.
ترکیب:
متد hide() دارای ترکیب زیر است:
hide( effect [, options ] [, duration ] [, complete ] )
Parameter
Description
effect
این پارامتر یک رشته است که نشان می دهد چه افکتی را برای تغییر استفاده کنیم.
options
این پارامتر از نوع Object است و تنظیمات خاص افکت و easing را نشان می دهد. علاوه بر این هر افکت دارای مجموعه گزینه های مربوطبه خود می باشد که می توانند به عنوان افکت مشترک بین چند افکت توصیف شده در جدول jQueryUI Effects تعیین شوند.
duration
این پارامتر از نوع Number یا String است و زمان افکت را به هزارم ثانیه نشان می دهد. مقدار پیش فرض آن ۴۰۰ است.
complete
وقتی که افکت برای این عنصر کامل می شود، این پارامتر یک متد کال بک است که برای عنصر فراخوانده می شود.
افکت های jQueryUI
جدول زیر افکت های مختلفی را توصیف می کند که می توانند با متد hide() استفاده شوند.
Effect
Description
blind
عنصر را به روش پنجره ی کور پنهان کرده یا نمایش می دهد: با حرکت دادن لبه ی پایینی صفحه به بالا و پایین یا چپ و راست، بستگی به مسیر و سبک تعیین شده دارد.
bounce
باعث می شود عنثر در حالت پرش در راستای عمودی یا افقی، ظاهر شود، که به طور انتخابی عنصر را پنهان کرده و یا نمایش می دهد.
clip
با جابه جا کردن مرزهای متضاد عنصر با هم، تا اینکه در میانه به یکدیگر برسند، عنصر را نمایش می دهد یا آن را پنهان می کند.
drop
عنصر را تنظیم می کند که طوری به نظر برسد که انگار روی صفحه یا از صفحه رها شده است، به این ترتیب آن را پنهان کرده یا نمایان می کند.
explode
با تقسیم عنصر به قطعات مختلف که در مسیرهای شعاعی حرکت می کند، انگار که روی صفحه و یا از صفحه پخش می شود، آن را پنهان می کند یا نمایش می دهد.
fade
با تنظیم میزان کدری عنصر، آن را پنهان یا آشکار می کند، درست مانند افکت های محو مرکزی عمل می کند، اما بدون گزینه.
fold
با تنظیم مرزها به داخل و یا خارج، عنصر را نمایش داده و یا پنهان می کند، سپس همین کار را برای مجموعه ی دیگری از مرزها انجام می دهد.
highlight
با تغییر لحظه ای رنگ زمینه، توجه را به سمت عنصر فرا می خواند و عنصر را پنهان کرده و یا نمایش می دهد.
puff
با تنظیم میزان کدری عنصر، آن را در جای خود باز کرده و یا می بندد.
pulsate
قبل از اینکه اطمینان حاصل کند که عنصر همانطور که تعیین شده، نمایش داده می شود یا پنهان می شود، میزان کدری عنصر را تنظیم می کند.
scale
عنصر را با یک درصد خاص باز کرده و یا می بندد.
shake
عنصر را به عقب و جلو ، افقی یا عمودی، حرکت می دهد.
size
طول و عرض عنصر را به مقدار مشخصی تغییر می دهد. مانند مقیاس، به جز اینکه چطور اندازه ی مورد هدف تعیین شده باشد.
slide
عنصر را طوری جابه جا می کند که به نظر می رسد روی صفحه یا خارج صفحه اسلاید شده است.
transfer
یک عنصر موقت اوت لاین را محرک سازی می کند که باعث می شود عنصر به عنصری دیگر منتقل شود. ظاهر عنصر اوت لاین باید از طریق قوانین CSS برای گروه ui-effects-transfer تعریف شود یا گروه به عنوان یک گزینه تعیین شود.
افکت – Blind
مثال زیر استفاده از متد hide() را با استفاده از افکت blind نشان می دهد. روی دکمه ی Blind Effect Hide کلیک کنید تا قبل از پنهان شدن عنصر، افکت blind را مشاهده کنید.
.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”).hide(“blind”, { times: 10, distance: 100 }, 1000, callback);
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function () {
$(“#effect”).removeAttr(“style”).hide().fadeIn();
}, ۱۰۰۰);
};
$(“#button”).click(function () {
runEffect();
return false;
});
});
افکت – shake
مثال زیر استفاده از متد shake() را با افکت blind نشان می دهد. روی دکمه ی Shake Effect Hide کلیک کنید تا قبل از اینکه عنصر پنهان شود، افکت shake را مشاهده کنید:
.toggler-1 {
width: 500px;
height: 200px;
}
#button-1 {
padding: .5em 1em;
text-decoration: none;
}
#effect-1 {
width: 240px;
height: 135px;
padding: 0.4em;
position: relative;
}
#effect-1 h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
$(function () {
function runEffect() {
$(“#effect-1”).hide(“shake”, { times: 10, distance: 100 }, 1000, callback);
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function () {
$(“#effect-1”).removeAttr(“style”).hide().fadeIn();
}, ۱۰۰۰);
};
// set effect from select menu value
$(“#button-1”).click(function () {
runEffect();
return false;
});
});
