جی کوئری یکی از محبوب ترین فریمورک های جاواسکریپت است که کد زدن و یادگیری آن بسیار آسان است (کتاب آموزش jQuery) . در این آموزش jQuery قصد داریم یک افکت پنهان و نمایان کردن عناصر در jQuery را پیاده سازی کنیم .
این افکت را با جاواسکریپت هم میتوانیم پیاده سازی کنیم ولی به دلایل زیر از جی کوئری بهره می بریم .
- کد نویسی آسان با توابع از پیش ساخته که حجم کدها را بسیار آسان می کند . بعنوان مثال , برای نمایش دادن و پنهان کردن DIV با جاواسکریپت , باید name و یا id آن را به صورت زیر مشخص کنیم .
|
1 2 3 |
document.some-form-name.element-name.display = 'none'; //or document.getElementById(element-id).display = 'none'; |
- jQuery پاسخ سریع تری به درخواست های پیچیده برنامه نویسی مثل AJAX را می دهد .
- فریمورک jQuery تضمین می کند که افکت ها در تمام مرورگر ها نتیجه یکسان خواهد داد.
- با داشتن کتابخانه jQuery , می توانیم لیستی از توابع برای مدیریت رویدادها , AJAX , افکت های داینامیک روی عناصر HTML و غیره .. در اختیار ما قرار میدهد که همه این ها در هنگام توسعه صفحات وب مورد نیاز خواهد بود .
مثال پنهان و نمایان کردن عناصر در jQuery
در این مثال , ما دو لینک به نام های Collapse “باز کردن” و Expand“جمع کردن” داریم که لیست عناصر را یک به یک مخفی و نمایش می دهد. این لینک ها به صورت یک دکمه توسط استایلی که در سلکتور کلاس CSS است نمایش داده می شوند .
بنابراین , کد HTML لینک ها بصورت زیر است .
|
1 2 |
<a href="#" class="expand">Expand All</a> <a href="#" class="collapse">Collapse All</a> |
با کلیک بر روی این لینک ها , یک رویداد کلیک به سمت jQuery ارسال می شود تا تابع بر اساس کلاس مشخص شده اجرا شود .
برای مثال , اگر لینک Collapse را کلیک کنیم , بلاک کد جی کوئری زیر اجرا خواهد شد .
|
1 2 3 4 5 6 7 8 |
$('.collapse').click(function(){ $(".collapse").hide(); $("li").last().hide("slow", function fnCollapse() { $(this).prev("li").hide("slow", fnCollapse); if(!$(this).prev("li").length) $(".expand").show(); }); }); |
در این بلاک , لینک collapse با استفاده از متد hide() در جی کوئری مخفی خواهد شد. و سپس متد fnCollapse() را به عنوان تابع بازگشتی برای مخفی کردن عناصر از پایین به بالا فراخوانی میکنیم.
زمانی که متد بالا به طور مکرر اجرا شد و هیچ تگی باقی نماند , لینک Expand برا استفاده ا متد show() ظاهر خواهد شد.
مشابه آن , می توانیم همان کدها را برای expand تکرار کنیم . که هر یک از آیتم ها را از بالا به پایین به ترتیب لیست کند .
|
1 2 3 4 5 6 7 8 9 |
$(".expand").hide(); $('.expand').click(function(){ $(".expand").hide(); $("li").first().show('slow',function fnExpand() { $(this).next("li").show("slow", fnExpand); if(!$(this).next("li").length) $(".collapse").show(); }); }); |
حتما کد های مدیریت رویداد بالا را در بلاک زیر استفاده کنید . این بلاک هماننط تابع window.onload() در جاواسکریپت خالص عمل می کند .
|
1 2 3 |
$(document).ready(function(){ ... }); |
می توانیم تکه کد های jQuery بالا را در یک فایل به نام مثلا jquery.showhide.js ذخیره و بعد در صفحه HTML خود فراخوانی کنیم . قبل از آن , باید آخرین نسخه فایل کتابخانه jQuery را سایت رسمی دانلود کنید یا اینکه میتوانید بصورت مستقیم از طریق تگ script آن را از URL اصلی بخوانید .
بنابراین محتویات کامل HTML ما بصورت زیر خواهد بود .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<html> <head> <link href="styles.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="jquery.showhide.js"></script> </head> <body> <table width="500px" cellpadding="10" cellspacing="10" border="0" class="tblShowHide"> <tr> <td valign="top"> <div> <span>Programmes</span> <a href="#" class="expand">Expand All</a> <a href="#" class="collapse">Collapse All</a> </div> <ul> <li>News</li> <li>Knowledge</li> <li>Religion</li> <li>Entertainment</li> <li>Movies</li> <li>Music</li> <li>Comedy</li> </ul> </td> </tr> </table> </body> </html> |
امیدوارم از آموزش پنهان و نمایان کردن عناصر در jQuery لذت برده باشید .
برای آموزش کامل و درک کلی نحوه استفاده و تعریف جی کوئری , کتاب آموزش jQuery فارسی را به رایگان دانلود کنید.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
