illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

8 1553 ۲۴ فروردین ۹۴

در این مطلب میخوام یک پلاگین 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 : محتویات بصورت اسلایدی به سمت چپ میرن و مخفی میشن

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    افشین زندی(۲۹ فروردین ۱۳۹۴)

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

  • ‏‏

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

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram