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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

2 2005 ۱۳ بهمن ۹۳

در این مطلب میخوام یک پلاگین 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‌ باشه ، زمانی که  سایدبار باز هست ، اسکرول محتوای اصلی سایت غیرفعال میشه.

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

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

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

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

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

  • ‏‏

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram