آموزش جی کوئری در پانزده روز : روز ششم

چهارشنبه, ۱۴ام بهمن , ۱۳۸۸ | ۱۷ دیدگاه

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

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

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

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

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

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

۵٫ محو و نمایان کردن یک 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 در ۱۵ روز

Be Sociable, Share!


۱۷ دیدگاه


  1. امین
    ۱۴ بهمن ۱۳۸۸

    ممنون. ادامه بدین 🙂




  2. مهسا
    ۱۹ بهمن ۱۳۸۸

    من که بلدم وقتی میخونم قاطی می کنم بیچاره اونایی که هیچی بلد نیستن.
    مرسی.




  3. lمسیح
    ۱۹ بهمن ۱۳۸۸

    # امین : خواهش می کنم. حتماً
    # مهسا : اونایی که بلد نیستن می دونم که دارن یاد می گیرن . شما که بلدید برین آموزش های سطح پیشرفته رو بخونید. من تمام تلاشم رو می کنم که ساده و گویا توضیح بدم. به هر حال ممنون از انتقادتون




  4. کامران
    ۱۹ بهمن ۱۳۸۸

    مسیح جان خودتو ناراحت نکنید کلا این مهسا خانم مثل اینکه فقط خواستن ما رو بکوبن نا اینکه انتقاد کنن
    همین که گفتن داره کمک کم از یاد دادن میره به سمت . . . . یعنی انتقاد غیر منطقی. چه اشکالی داره ما درآمد هم داشته باشیم از این وب سایت که بتونیم بهتر بشیم و وقت بیشتری برای این سایت بزاریم؟؟




  5. مهسا
    ۲۰ بهمن ۱۳۸۸

    #مسیح: مرسی از پیشنهادت. در مورد حرفی هم که در بالا زدم باید بگم مثل شما و بقیه از مادر با jQuery و javascript که زاده نشدم و یه روزی هم خودم یاد گرفتم و اون روز کسایی که به طریقی که شما می نویسید می نوشتند بیشتر موجب سردرگمی من می شدند تا یاد گرفتن به هر حال منظور اینه که درسته در اینکه شما تلاش خودتو می کنی شکی نیست ولی بهتره با تحقیق بیشتر با شیوه های بهتر آموزشی هم آشنا بشین. ممنون.
    #کامران: بسیار از اینکه این موارد رو در مورد من نوشتین ممنونم. همین که برای خوانندگانتون اینقدر ارزش قایل هستین نشاندهنده این هست که چقدر برای کارتون ارزش قایل هستین. در مورد اینکه در نقد زبان تندی دارم و خوشایند بسیاری از دوستان واقع نمیشه باید منو ببخشید. در مورد اینکه درآمد داشته باشین باید بگم که هیچ اشکالی نداره به شرط اینکه از راه درست باشه. یه جا تو سایتتون به سایت nettuts اشاره کرده بودین اونا هم مثل شما دنبال در آمد هستند ولی فرقش این هست که اونا با چیزهایی خودشون می سازن مثل Template ها و تبلیغات برای سایت هایی که خدمات مشابه می دن در آمد دارند. حالا به نظر شما درسته که در یک سایت آموزشی که مدیرش خواستار جهانی شدن هم هست از طریق فروش سی دی قفل شکسته Adobe Dreamweaver در آمد کسب کنه؟ مرسی.




  6. مرتضی
    ۲۰ بهمن ۱۳۸۸

    سلام آقا مسیح ، خسته نباشید ، یه سؤال ،اگه بخوایم اضافه کردن کلاس قسمت پنجم این آموزش رو با addClass و removeClass انجام بدیم چه جوری میشه ، من خودم یه چیزی نوشتم ولی یه جاش اشکال دارم.ضمنا قبلش border رو بردم تو همون box اضافه کردم و یه کلاس براش تعریف نکردم.
    حالا مشکل اینه که چه جوری به یه خصیصه ی خاص توboxدسترسی داشته باشم.در واقع مشکل علامت سؤال تو کد پایینه.ممنون میشم اگه راهنمایی کنید.
    $(‘a.toggle5’).click(function() {
    if($(‘?’).is(“:hidden”)){
    $(‘#box’).addClass(‘border’);
    } else {
    $(‘#box’).removeClass(‘border’);
    }});



  7. […] آموزش جی کوئری در پانزده روز : روز ششم […]




  8. masoud
    ۲۷ بهمن ۱۳۸۸

    یه چیزی
    اول باید فایل js رو ادد کنیم بعد زیرش کد بزنیم
    من جابجا زده بودم بد جور کارهام ریخته بود به هم




  9. امید
    ۷ اسفند ۱۳۸۸

    سلام
    عالی است.
    اما وقتی من از ۳ fade in و fade out بر روی ۳ عکس استفاده می کنم با کلیک بر روی عکس اول بقیه باکس های عکس های بعدی هم همراه باکس عکس اول باز و بسته می شوند.
    چگونه می توان کاری کرد که با کلیک بر روی یک عکس، باکس های عکس های بعدی بصورت خودکار بسته شوند و فقط باکس عکس اول باز شود؟
    با تشکر




  10. مسيح
    ۱۱ اردیبهشت ۱۳۸۹

    :: مرتضی :‌ یه نگاه به اینجا بنداز با مثال توضیح داده فکر می کنم زودتر از توضیحات من متوجه بشی :

    http://docs.jquery.com/UI/Effects/addClass

    :: مسعود : مرسی از اینکه ایرادهات رو میگی که دیگران متوجه بشن …

    :: امید :‌اگر فقط ۳ تا عکس داری پیشنهاد می کنم برای هر عکس یه class تعریف کنی و … اگر خیلی عکس داری باید کدت رو اینجا بنویسی تا برات درستش کنم




  11. مهرداد
    ۱۱ آبان ۱۳۸۹

    من ۲ تا سوال داشتم

    اول از مهسا خانوم: میخواستم بپرسم شما از کجا jquery رو یاد گرفتید ؟ ایا فقط سایت ها رو خوندید یا کتابی تهیه کردید ؟

    دون اینکه ایا کتابی در ایران در زمینه اموزش jquery چاپ شده. ترجمه یا تالیف فرقی نداره.




  12. وحید
    ۲۷ آذر ۱۳۸۹

    با سلام و خسته نباشید
    چرا آیتم چهارم باید دابل کلیک شود تا کار کند اما بقه کلیک تکی هم کار میکنند




  13. comerun
    ۲۷ مهر ۱۳۹۰

    @ وجید :
    اگر شی شما نمایان است که این یعنی fade in هست و وقتی شما کلیک اول را میزنید fade in انجام میشود و تغییری نمی بینید ، و از کلیک دوم fade out انجام شده و کلیک های بعدی توالی را انجام میدهند.

    پس بهتر است اگر از شکلی که دارید display آن نمایان است ، تابع اول را به fade out اختصاص دهید و دومی را به fade in




  14. فریدون
    ۱۵ دی ۱۳۹۰

    با سلام و ممنون بابت آموزش خوب و جامعتون!
    یه سوال داشتم :
    اگه بخوایم وقتی عکس در ۰ پیکسلیِ سمت چپ قرار داره هنگام کلیک به ۲۰۰ پیکسلیِ سمت چپ جابه جا بشه و وقتی در ۲۰۰ پیکسلیِ سمت چپ قرار داره هنگام کلیک به ۰ پیکسلیِ سمت چپ بیاد باید چه کار کنیم؟؟ (دو حالت برای عکس وجود داره که با هر کلیک از این حالت به اون حالت جا به جا میشه)
    با سپاس فراوون




  15. میلاد
    ۳ اسفند ۱۳۹۰

    چرا من هرکاری میکنم اون دستورای
    if…
    اینا کار نمیکنه برام بقیه کار میکنه




  16. میلاد
    ۴ اسفند ۱۳۹۰

    راستی برای کشویی میتونین از slideToggle استفاده کنین




  17. HappyMoon
    ۹ اسفند ۱۳۹۰

    ممنون.



دیدگاه خود را بنویسید