tabulous.js : پلاگین jQuery برای ساخت تبهای زیبا

- visibility ۸ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام tabulous رو خدمت شما معرفی کنم و اونو آموزش بدم.

tabulous

 

با استفاده از این پلاگین میتونین براحتی هر چه تمامتر برای سایتتون تب بندی زیبایی قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین.

میبینید که یک باکس با 3 تب قرار داده شده و هر زمان که روی تبهای دیگه کلیک میکنید ، محتوا با حالت زیبایی محو میشه و محتوای جدید ظاهر میشه. این ابزار پشتیبانی خوبی از مرورگر ها داره.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به tabulous.min.js و jquery.min.js و reset.css و tabulous.css نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

میبینید که در بالا فایل reset.css رو هم اضافه کردیم تا کدهای پیش فرض مرورگر رو خنثی کنه و تب بندیمون با مشکل مواجه نشه.

اولین قدم اینه که یک div با id = tabs قرار بدین ، بصورت زیر :

بعد از اون باید در این div ، یک ul قرار بدین و عنوان هر تب رو درون یک li قرار بدین ، بصورت زیر :

درون هر li یک تگ a قرار دادیم و مقدار خاصیت href اون رو برابر با id بخش مربوط به خودش قرار دادیم.

حالا باید بیاید و محتویات همه تبها رو در یک div با id = tabs_container قرار بدین :

هر تب رو باید در یک div جداگونه و با id مشخص قرار بدین. همون مقداری که به خاصیت href قرار دادین. بصورت زیر :

درون هر تب هم میتونین محتویات مورد نظرتون رو قرار بدین. بعد از اون باید در تگ اسکریپت نهایی کد زیر رو قرار بدین ، تا پلاگین فعال بشه و تب بندی صورت بگیره :

میبینید که در ابتدا div با id = tabs رو انتخاب کردیم و بعد از اون متد tabulous رو برای اون فراخوانی کردیم. این متد یک ویژگی بنام effect داره که میتونین با استفاده از اون نوع افکتی که با رفتن به تب جدید ، روی میده رو مشخص کنید. مقدار پیش فرض این ویژگی scale هست و 3 مقدار دیگه هم داره :

  • flip : محتویات میچرخند
  • scaleUp : محتویات بزرگ میشن و مخفی میشن
  • slideLeft : محتویات بصورت اسلایدی به سمت چپ میرن و مخفی میشن

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
افشین زندی

سلام آقای اسفندیاری.ممنون از معرفی و آموزش این پلاگین کاربردی.آموزش شما خیلی بهتر از داکیومنت خود سایت سازندشه!
اگه میشه آموزش پلاگین هایی که برای ساخت گالری نمونه کار portfolio مثل isotope یا پلاگین هایی که برای این کار میشناسین رو بزارین

محمد اسفندیاری

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

سلام ببخشید من میخوام داخل باکس های این تب ها از li و a برای ساخت منو استفاده کنم. اما فقط آخرین li لینک درونش فعاله بقیه li ها لینکشون غیر فعله. لطفا من رو راهنمایی کنید.

محمد اسفندیاری

منظورتون رو از غیر فعال بودن لینک نمیفهمم!!
این لینکهای آدرسشون بصورت # هست و کاربردشون آدرس دهی به بخش مورد نظر هست نه به صفحه ای دیگه

رضا

لطفا برای اینکه متوجه منظور من بشید پک زیر رو دانلود کنید. ممنون
http://s3.picofile.com/file/8195843368/tabulous.zip.html

محمد اسفندیاری

خب مشکلش چیه؟ تب بندی درسته که!

مهدی

سلام
ممنون از سایت خوبتون. من این سایت شما را خیلی دوست دارم
سوالی داشتم؟
وقتی که متن اضافه می کنیم و اسکرول می خورددر تب دوم وقتی متنی وارد شود اسکرول هر دو از کار می افته و کلا اسکرول کار نمی کنه مشکل کجاست ؟با تشکر

محمد اسفندیاری

متن رو در تبها اضافه کردین؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.