در این مطلب آموزش ایجاد تب بندی با جی کوئری را برای کاربران عزیز قرار داده ایم. ایجاد تب بندی با جی کوئری یکی از مواردی بوده که همه ماها مطمئنا حداقل یک بار رو باهاش برخورد داشتیم و توی طرح ها و سایت ها مون خواستیم که از اون استفاده کنیم. از طرف دیگه بحث امروز طراحی وب دنیا، طرح های واکنش گرا یا responsive هست. در این پست یک تب بندی ریسپانسیو با جی کوئری را برای کاربران عزیز قرار داده ایم. لازم به ذکر است که یکی از بهترین و ساده ترین پلاگین هایی که میشه برای این منظور استفاده کرد افزونهی Responsive Tabs می باشد.
جهت مشاهده آموزش ایجاد تب بندی با جی کوئری به ادامه مطلب مراجعه نمایید.
گام اول : ساختار HTML
اولین قدم مثل همیشه تعیین ساختار html ی هست که باید استفاده کنیم.
html مون از دو بخش تشکیل شده، بخش اول یک لیست هست که برای دکمه های تب ها استفاده می شه و بخش دوم تگ های div با آی دی های منحصر به فرد هستند که محتوای تب ها داخل اون ها نمایش داده خواهد شد.
گام دوم : کدهای CSS
کدهای سی اس اسی که استفاده میکنیم دو بخش هستند. بخش اول یک نباید تغییری توش بدین مربوط به ریسپانسیو کردن مون هست.
و بخش دوم استایل ظاهری هست که به کار میدیم:
گام سوم : جی کوئری
و در نهایت باید کتابخانه جی کوئری و فایل افزونه مون رو به صفحه پیوست کنیم :
و سپس تابع رو فراخوانی می کنیم :
برگرفته از : میهن لرن
برای تازه شدن دیر نیست.
موفق و پیروز باشید…
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۳ شهریور ۱۳۹۳
سلام. ممنونم، لطف دارید.
از بخش دسته بندی میتونید پیدا کنید، موجود هست
اگر مقدور است لینک دانلود فایل jquery.responsiveTabs.js را داخل آموزش قرار دهید
با تشکر فراوان