در حال ارتباط با سرور...




لطفا نظرات و پيشنهادات خود را بمنظور ارتقاء کيفي هرچه بيشتر سايت با ما در ميان بگذاريد.

ویدیوها مقالات کتاب ها اخبار پرسش و پاسخ
برنامه‌های رومیزی مبتنی بر وب زبان های برنامه سازی پایگاه داده سیستم عامل شبکه 
مقاله بگذارید
توسط : mehdints دسته بندی : مبتنی بر وب تاریخ : 1392-8-15 12:40:57

امروز قصد دارم تا طرز نوشتن Tab با jQuery رو بهتون آموزش بدم که امروزه خیلی کاربرد داره .

قبل از شروع آموزش باید چندتا تابع jQuery رو بهتون معرفی کنم .

hide() : این تابع همان طور که از نامش پیداس وظیفه مخفی کردن را دارد .( توضیحات بیشتر )

show() : این تابع همان طور که از نامش پیداس وظیفه نمایش دادن را دارد .( توضیحات بیشتر )

eq() : این تابع تعداد تگ های هم نام را بصورت یک آرایه بر میگرداند . ( توضحات بیشتر )

data() : این تابع data یک تگ را بر میگرداند ( توضیحات بیشتر )

 

$(function(){
  
var btn_tab = $('a') ;
var content_tab = $('.content') ;
var tabs = $('.tab');
  
 content_tab.hide() ;
 content_tab.eq(0).show() ;
 
 btn_tab.bind('click' , function() {
   
  var data_tab = $(this).data('tab') ;
  content_tab.hide() ;
   
   
  content_tab.eq ( data_tab ).show(70)  ;
   
   
  })
  
})

ر این کد آمدیم ابتدا کلاس contetnt_tab رو hide کردیم که content_tab کلاسی است که محتویات tabها باید در آنها قرار گیرد . خوب حالا اومدیم اولین تگ content_tab که در واقع اولین tab ماست رو show کردیم تا اینجا tab  ما از نظر نمایش اولیه درست شد .

در این مرحله باید کلید های تب را درست کنیم که وقتی روی آن ها کلیک شد tab نیز تعویض شوند . در اینجا اومدیم فتیم که وقتی روی یک tag a کلیک شد function زیر را اجرا کن خوب ما در این function ابتدا اومدم data تگ a رو گرفتیم و در خط بعد آمدیم کل tag content_tab را hide کردیم و در خط بعد تعداد تگ های content_tab را گرفتیم و مقدار data تگ a را show کردیم . یک مثال برای درک بهتر مطلب :

فرض کنید data تگی که روش کلیک شد 2 است . و قصد ما این است که وقتی رو 2 کلیک شد tab 2 به نمایش در آید خوب ما 2 رو با تابع eq()می  دهیم (با توجه به توضیحات بالا) و تابع eq()  ردیف 2 را برای ما show می کند .

در پایین فایل کامل این آموزش را براتون گذاشتم البته بدون کد نویسی اضافه که قشنگ متوجه بشید .

امیدوارم این آموزش مفید براتون واقع شده باشه .

لینک دانلود کامل این آموزش

منبع : آریاسیلور

mehdints
101     4
نظرات
نظر داده نشده است