سلام، در آموزش امروز قصد داریم پر کاربردترین مبحث جی کوئری که به Toggle معروف هست رو یاد بگیریم. Toggle در واقع کدیست که به کمک اون می تونیم یک عمل رو پی در پی انجام بدیم. به یقین این آموزش کاملترین آموزش toggle در وب فارسی هست چون سعی کردم تمام حالات toggle رو آموزش بدم و خیلی برای آموزش امروز زمان گذاشتم چون واقعاً کاربردیه و در افکتهایی که در آینده خواهم گفت کاربرد بسیار زیادی داره.
امروز چه کار خواهیم کرد :
۱٫ محو و نمایان کردن مربع به صورت آنی
۲٫ محو و نمایان کردن مربع در بازۀ زمانی
۳٫ محو و نمایان کردن مربع به صورت کشویی
۴٫ محو و نمایان کردن مربع به صورت fade in و fade out
5. محو و نمایان کردن یک Class
محو و نمایان کردن مربع به صورت آنی :
امروز هم چون کدهای CSS و jQuery کم هستند اون هارو درون فایل index می نویسیم. و برای هر مرحله از لینک جدا استفاده می کنیم. ابتدا مربع ۳۲۰ پیکسلی معروفمون رو به رنگ مشکی می سازیم.
<style type="text/css">
#box
{
width: 320px;
height: 320px;
background: black;
}
</style>
<body>
<div id="box"></div>
</body>
و لینک اول را با کلاسی به نام Toggle1 درست می کنیم تا با کلیک کردن روی اون بتونیم دستور بدیم که عمل محو و نمایان کردن آنی مربع است انجام بشه
<a class="toggle1" href="#">Toggle - Simple</a>
خب از ساده ترین کد شروع می کنیم یعنی خود دستور toggle . کافیه کد زیر رو بنویسید و وقتی روی لینک کلیک می کنید مربع به صورت آنی محو و با کلیک دوباره همان لحضه نمایان می شود. دوستان پرسیده بودن که چطور می تونیم یک لینک خاص رو به افکت خاصی اختصاص بدیم. همونطور که میبینید ما برای لینکمون یک کلاس تعریف کردیم به نام toggle1 و در کد زیر هم میبینید به چه صورت دستور کلیک را نوشتیم : a.toggle1
$(function() {
$('a.toggle1').click(function() {
$('#box').toggle();
});
});
محو و نمایان کردن مربع در بازۀ زمانی :
خب به نظر من اصلاً جالب نیست که مربع ما یک لحظه باشه و یک لحظه نباشه ! ما به راحتی می تونیم به این رفت و آمد افکت اضافه کنیم. کافیه در کد بالا درون پرانتزی که جلوی کد toggle هست یک زمان به میلی ثانیه اضافه کنیم مثلاً ۴ ثانیه برای محو و نمایان شدن :
$(function() {
$('a.toggle2').click(function() {
$('#box').toggle(4000);
});
});
و البته لینکی با کلاسی به نام toggle2 که با کلیک روی آن عملیات انجام شود.. به صورت زیر :
<a class="toggle2" href="#">Toggle - In 4 Second</a>
در این صورت مربع ما به حالت پیش فرض toggle که محوشدن آهسته + کوچک شدن عرض و ارتفاع است در مدت ۴ ثانیه محو می شود و چون از toggle استفاده کردیم با کلیک دوباره روی لینک به همین صورت نمایان خواهد شد.
محو و نمایان کردن مربع به صورت کشویی :
خب درسته که کد زیر به صورت مکرر انجام میشه ولی در اون از toggle استفاده نمی کنیم ! در واقع می شود گفت کد زیر زبانی ساده از مفهوم toggle است. بهتر است این کد را اینطور بخونیم که :
اگر #box بسته بود اون رو در زمان ۴ ثانیه باز کن در غیر این صورت اون رو در زمان ۴ ثانیه ببنید !
$('a.toggle3').click(function() {
if ($('#box').is(":hidden")) {
$('#box').slideDown(4000);
} else {
$('#box').slideUp(4000);
}
});
برای اجرای این دستور هم از لینک با کلاسی به نام toggle3 استفاده می کنیم :
<a class="toggle3" href="#">Toggle - slide up and slide down</a>
محو و نمایان کردن مربع به صورتfade in و fade out :
خب این قسمت یکمی مفهومش ممکنه سخت به نظر بیاد و توضیح کد siblings به تنهایی یک جلسه زمان می بره ولی مختصر می گم که این کد برای پیدا کردن عنصر خاصی است بین عناصر تکراری دیگر. برای درک مفهوم این کد پیشنهاد می کنم اینجا رو بخونید و مثال ها رو ببینید تا کاملاً متوجه مورد استفادۀ این بشوید.
$('a.toggle4').toggle(function() {
$('a.toggle4').siblings('#box').fadeIn(4000);
}, function() {
$('a.toggle4').siblings('#box').fadeOut(4000);
});
و لینک چهارم که به این صورت می نویسیم :
<a class="toggle4" href="#">Toggle - fade in and fade out</a>
* اگر معنی کد بالا رو متوجه نشدید نگران نباشید در آینده به تفصیل توضیح خواهم داد. این کد رو کاملاً از خودم ساختم چون در demo ها برای fade in و fade out به صورت toggle چیزی پیدا نکردم !
محو و نمایان کردن یک Class :
ما می تونیم هر Class جدیدی رو بسازیم و با toggle محو و نمایان کنیم. برای مثال من یک class میسازم و به وسیلۀ اون یک کادر به عکس اضافه می کنم. اسم class رو border می زارم و یک خط ۵ پیکسلی برای مربع تعریف می کنم :
.border
{
border: 5px solid red;
}
و لینک جدیدی برای این کار می سازم با کلاسی به نام toggle5 :
<a class="toggle5" href="#">Toggle - add and remove Class</a>
و میریم سراغ اصل مطلب که کد جی کوئری هست :
<script type="text/javascript">
$('a.toggle5').click(function() {
$('#box').toggleClass('border');
});
</script>
تنها فرقی که در این کد میبینید toggleclass هست که کاملاً از اسمش پیداست چه کاری انجام میده ! کافیه بعد از این کد آرایه ای که در قسمت CSS تعریف کردید رو بنویسید تا با کلیک بر روی لینک به صورت پی در پی افکت انجام شود. همین.
سعی کردم این جلسه خیلی کامل باشه. امیدوارم به دردتون بخوره… جلسۀ آینده نحوۀ تار کردن و شفاف کردن عکس رو توسط جی کوئری یاد خواهیم گرفت…
پستهای مرتبط :
آموزش جی کوئری در پانزده روز : روز پنجم
آموزش جی کوئری در پانزده روز : روز چهارم
آموزش جی کوئری در پانزده روز : روز سوم
آموزش جی کوئری در پانزده روز : روز دوم
آموزش جی کوئری در پانزده روز : روز اول
مقدمه ای بر آموزش jQuery در ۱۵ روز
