آخرین ارسال ها

نمایش پروفایل کاربر · Thursday 04 February 2010 19:14

سلام، در آموزش امروز قصد داریم پر کاربردترین مبحث جی کوئری که به Toggle معروف هست رو یاد بگیریم. Toggle در واقع کدیست که به کمک اون می تونیم یک عمل رو پی در پی انجام بدیم. به یقین این آموزش کاملترین آموزش toggle در وب فارسی هست چون سعی کردم تمام حالات toggle رو آموزش بدم و خیلی برای آموزش امروز زمان گذاشتم چون واقعاً کاربردیه و در افکتهایی که در آینده خواهم گفت کاربرد بسیار زیادی داره.

امروز چه کار خواهیم کرد :

۱٫ محو و نمایان کردن مربع به صورت آنی

۲٫ محو و نمایان کردن مربع در بازۀ زمانی

۳٫ محو و نمایان کردن مربع به صورت کشویی

۴٫ محو و نمایان کردن مربع به صورت fade in و fade out

5. محو و نمایان کردن یک Class

محو و نمایان کردن مربع به صورت آنی :
امروز هم چون کدهای CSS و jQuery کم هستند اون هارو درون فایل index می نویسیم. و برای هر مرحله از لینک جدا استفاده می کنیم. ابتدا مربع ۳۲۰ پیکسلی معروفمون رو به رنگ مشکی می سازیم.

01
<style type="text/css"> 

02
#box 

03
{ 

04
    width: 320px; 

05
    height: 320px; 

06
    background: black; 

07
} 

08
</style> 

09
<body> 

10
<div id="box"></div> 

11
</body>

و لینک اول را با کلاسی به نام Toggle1 درست می کنیم تا با کلیک کردن روی اون بتونیم دستور بدیم که عمل محو و نمایان کردن آنی مربع است انجام بشه

`1`	`<a` `class="toggle1"` `href="#">Toggle - Simple</a>`

خب از ساده ترین کد شروع می کنیم یعنی خود دستور toggle . کافیه کد زیر رو بنویسید و وقتی روی لینک کلیک می کنید مربع به صورت آنی محو و با کلیک دوباره همان لحضه نمایان می شود. دوستان پرسیده بودن که چطور می تونیم یک لینک خاص رو به افکت خاصی اختصاص بدیم. همونطور که میبینید ما برای لینکمون یک کلاس تعریف کردیم به نام toggle1 و در کد زیر هم میبینید به چه صورت دستور کلیک را نوشتیم : a.toggle1

1
$(function() { 

2
    $('a.toggle1').click(function() { 

3
        $('#box').toggle(); 

4
    }); 

5
});

محو و نمایان کردن مربع در بازۀ زمانی :
خب به نظر من اصلاً جالب نیست که مربع ما یک لحظه باشه و یک لحظه نباشه ! ما به راحتی می تونیم به این رفت و آمد افکت اضافه کنیم. کافیه در کد بالا درون پرانتزی که جلوی کد toggle هست یک زمان به میلی ثانیه اضافه کنیم مثلاً ۴ ثانیه برای محو و نمایان شدن :

1
$(function() { 

2
    $('a.toggle2').click(function() { 

3
        $('#box').toggle(4000); 

4
    }); 

5
});

و البته لینکی با کلاسی به نام toggle2 که با کلیک روی آن عملیات انجام شود.. به صورت زیر :

`1`	`<a` `class="toggle2"` `href="#">Toggle - In 4 Second</a>`

در این صورت مربع ما به حالت پیش فرض toggle که محوشدن آهسته + کوچک شدن عرض و ارتفاع است در مدت ۴ ثانیه محو می شود و چون از toggle استفاده کردیم با کلیک دوباره روی لینک به همین صورت نمایان خواهد شد.

محو و نمایان کردن مربع به صورت کشویی :
خب درسته که کد زیر به صورت مکرر انجام میشه ولی در اون از toggle استفاده نمی کنیم ! در واقع می شود گفت کد زیر زبانی ساده از مفهوم toggle است. بهتر است این کد را اینطور بخونیم که :
اگر #box بسته بود اون رو در زمان ۴ ثانیه باز کن در غیر این صورت اون رو در زمان ۴ ثانیه ببنید !

1
$('a.toggle3').click(function() { 

2
      if ($('#box').is(":hidden")) { 

3
          $('#box').slideDown(4000); 

4
    } else { 

5
          $('#box').slideUp(4000); 

6
            } 

7
});

برای اجرای این دستور هم از لینک با کلاسی به نام toggle3 استفاده می کنیم :

`1`	`<a` `class="toggle3"` `href="#">Toggle - slide up and slide down</a>`

محو و نمایان کردن مربع به صورتfade in و fade out :
خب این قسمت یکمی مفهومش ممکنه سخت به نظر بیاد و توضیح کد siblings به تنهایی یک جلسه زمان می بره ولی مختصر می گم که این کد برای پیدا کردن عنصر خاصی است بین عناصر تکراری دیگر. برای درک مفهوم این کد پیشنهاد می کنم

رو بخونید و مثال ها رو ببینید تا کاملاً متوجه مورد استفادۀ این بشوید.

1
$('a.toggle4').toggle(function() { 

2
$('a.toggle4').siblings('#box').fadeIn(4000); 

3
}, function() { 

4
$('a.toggle4').siblings('#box').fadeOut(4000); 

5
});

و لینک چهارم که به این صورت می نویسیم :

`1`	`<a` `class="toggle4"` `href="#">Toggle - fade in and fade out</a>`

* اگر معنی کد بالا رو متوجه نشدید نگران نباشید در آینده به تفصیل توضیح خواهم داد. این کد رو کاملاً از خودم ساختم چون در demo ها برای fade in و fade out به صورت toggle چیزی پیدا نکردم !

محو و نمایان کردن یک Class :
ما می تونیم هر Class جدیدی رو بسازیم و با toggle محو و نمایان کنیم. برای مثال من یک class میسازم و به وسیلۀ اون یک کادر به عکس اضافه می کنم. اسم class رو border می زارم و یک خط ۵ پیکسلی برای مربع تعریف می کنم :

1
.border 

2
{ 

3
    border: 5px solid red; 

4
}

و لینک جدیدی برای این کار می سازم با کلاسی به نام toggle5 :

`1`	`<a` `class="toggle5"` `href="#">Toggle - add and remove Class</a>`

و میریم سراغ اصل مطلب که کد جی کوئری هست :

1
<script type="text/javascript"> 

2
 
3
        $('a.toggle5').click(function() { 

4
            $('#box').toggleClass('border'); 

5
 
6
        }); 

7
</script>

تنها فرقی که در این کد میبینید toggleclass هست که کاملاً از اسمش پیداست چه کاری انجام میده ! کافیه بعد از این کد آرایه ای که در قسمت CSS تعریف کردید رو بنویسید تا با کلیک بر روی لینک به صورت پی در پی افکت انجام شود. همین.
سعی کردم این جلسه خیلی کامل باشه. امیدوارم به دردتون بخوره…


آموزش پرورش اندام در 90 روز	دستبندوگوشواره ماه تولد شما	آموزش افزایش قد (کتاب و سی دی)	جدیدترین روش بستن شال و روسری	برنامه مشاهده همه شبکه های دنیا

موضوع های مرتبط با این موضوع...
موضوع:		نویسنده	پاسخ:	بازدید:	آخرین ارسال
	آموزش کامل و همه چیز درمورد ویروس Blaster	MenDark	0	334	Friday 08 April 2011 18:19 آخرین ارسال: MenDark
	آموزش HTML	DUSKY	40	5,814	Saturday 06 November 2010 11:50 آخرین ارسال: admin
	آموزش برنامه نویسی .CSS (استفاده از کلاس و id در طراحی صفحات با CSS)	MoonLover	0	301	Sunday 12 September 2010 23:10 آخرین ارسال: MoonLover
	آموزش برنامه نویسی .CSS ( استفاده از شناسه style)	MoonLover	0	281	Sunday 12 September 2010 23:08 آخرین ارسال: MoonLover
	آموزش برنامه نویسی .CSS (css در head)	MoonLover	0	260	Sunday 12 September 2010 23:07 آخرین ارسال: MoonLover

جستجو در این موضوع نحوه نمایش امکانات امکانات مدیر آموزش جی کوئری در پانزده روز : روز ششم
نویسنده	پیام