slidebars : پلاگین jQuery برای قرار دادن سایدبار

- visibility ۲ mode_comment

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

 

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر بخشهایی رو در گوشه سایتتون قرار بدین و در مواقع لزوم اونا رو نمایش بدین. میتونین منو و .... رو در این بخشها قرار بدین و این ابزار خیلی بدرد طراحی Responsive‌ میخوره.

میبینید که هر زمان روی دکمه های Toggle Left‌ و Toggle Right کلیک میشه ، بترتیب بخش سمت چپ و سمت راست باز میشن و با کلیک مجدد بسته خواهند شد.

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

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

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

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

اولین کاری که باید انجام بدیم اینه که متاتگ viewport‌ رو به بخش head‌ اضافه کنیم. بصورت زیر :

محتویات اصلی سایت شما باید در یک div‌ با شناسه sb-site قرار بگیره. بصورت زیر :

حالا نوبت به بخشهای کناری میرسه. باید هر کدوم از بخشهای کناری رو در یک div‌ قرار بدیم و به همه اونا کلاس sb-slidebar‌ رو نسبت بدیم. سایدبارها در این ابزار انواع مخالفی دارن که دو نوعش مهمتره :

  1. سایدبار چپ : این سایدبار در سمت چپ قرار میگیره و برای اینکار باید علاوه بر کلاس بالایی ، کلاس sb-left رو هم به اون نسبت بدیم. بصورت زیر :  
  2.  سایدبار راست : این سایدبار در سمت راست قرار میگیره و برای اینکار باید علاوه بر کلاس بالایی ، کلاس sb-right رو هم به اون نسبت بدیم. بصورت زیر :  

عرض سایدبار ها در بالا بصورت پیشفرض هست. همچنین شما میتونین اون رو کم و زیاد کنید. برای اینکار باید کلاس sb-width-custom‌ رو هم به اون سایدبار نسبت بدین و بعد از اون درون خصوصیت data-sb-width‌ مقدار عرض سایدبار رو مشخص کنید. بصورت زیر :

همونطور که میبینید ، عرض سایدبار رو 25 درصد کل عرض صفحه قرار دادیم.

حالا باید چیزی رو اضافه کنیم که بتونیم روی باز و بسته شدن سایدبارها کنترل داشته باشیم. برای اینکار باید از کلاسهای sb-toggle-left‌ و sb-toggle-right‌ استفاده کنیم. کلاس اول روی سایدبار سمت چپ کنترل داره و کلاس دوم روی سایدبار سمت راست.

من این کلاسهارو به دو دکمه نسبت دادم ، که با کلیک بر روی دکمه ها سایدبارها باز و بسته میشن. بصورت زیر:

در نهایت باید پلاگین رو اعمال کنید. برای اینکار باید در تگ اسکریپت نهایی کد زیر رو قرار بدین :

میبینید که در بالا سه خصوصیت قرار داده شده.

  • siteClose‌ : اگر مقدار این ویژگی true باشه ، وقتی که سایدبار باز هست ، با کلیک بر روی محتوای اصلی سایت ، سایدبار بسته میشه.
  • disableOver‌ : با استفاده از این ویژگی میتونین مشخص کنید که باز و بسته شدن سایدبار ها ، از عرض مشخصی به بالا غیرفعال بشه. مقدار این ویژگی یا false‌ هست یا عددی صحیح
  • scrollLock : اگر مقدار این ویژگی true‌ باشه ، زمانی که  سایدبار باز هست ، اسکرول محتوای اصلی سایت غیرفعال میشه.

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

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

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

comment دیدگاه کاربران
Abbas412

عالی بود
ممنون

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

موفق باشید

نیاز به لاگین

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