جشنواره نوروزی سون لرن

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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 5 دقیقه
۱۳ بهمن ۱۳۹۳

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

 

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - Slidebars</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="slidebars.min.css">
	<link rel="stylesheet" href="reset.css">
	<style type="text/css">
		.btn {
			-webkit-border-radius: 8;
			-moz-border-radius: 8;
			border-radius: 8px;
			font-family: Arial;
			color: #ffffff;
			font-size: 20px;
			background: #3498db;
			padding: 10px 30px 10px 30px;
			border: dotted #d3e2eb 5px;
			text-decoration: none;
			margin-left: 350px;
			outline: none;
		}

		.btn:hover {
			background: #3cb0fd;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat natus, qui doloremque culpa assumenda quasi nulla, sequi cum quae quibusdam expedita, deleniti autem molestiae hic laborum dignissimos placeat magni deserunt quam? Esse quam, ratione officiis iusto illo explicabo natus, alias quasi ullam suscipit ab, recusandae repellendus est dolorum atque ad!</p>
		<button class="btn">Toggle Left</button>
		<p>Deserunt provident asperiores eligendi veniam ipsum, illo dignissimos quo non vitae reiciendis nesciunt, sint vero recusandae! Porro ipsa, quasi, cum sit est voluptates. Nemo doloribus voluptates ipsam. Illo qui odio, reprehenderit maiores molestias aspernatur, iste, sit iure hic omnis magnam. Officiis sed quidem atque obcaecati tempore veniam sunt ullam, nam.</p>
		<button class="btn">Toggle Right</button>
		<p>Saepe maiores molestias necessitatibus veniam! Illo, assumenda at! Rerum quia nemo maxime neque delectus error fugiat autem dolores cum commodi possimus numquam, fugit quae repellat sequi quam placeat amet molestiae perspiciatis unde quos nulla. Maxime nesciunt, in magni nemo nulla, laudantium quisquam, dolore officiis sed provident quas, libero aliquid itaque.</p>
	</div>

	<div>
		<!-- Your left Slidebar content. -->
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos aliquid soluta quas ipsum facere ea eveniet assumenda, officiis deserunt, vero autem, obcaecati perferendis quidem maiores sed. Perspiciatis accusamus consequatur, fuga, alias doloribus assumenda fugit repudiandae error ratione odit laborum eveniet.</p>
	</div>

	<div>
		<!-- Your Right Slidebar content. -->
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti in amet, impedit, omnis iste accusantium consequuntur, facere sed ducimus dolor est quisquam. Non nobis enim excepturi, libero eum dolorum quibusdam omnis delectus ut esse odio, magni corporis atque voluptatum vero!</p>
	</div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="slidebars.min.js"></script>
	<script type="text/javascript">

	</script>
</body>
</html>

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

<div id="sb-site">
  <!-- Your main site content. -->
</div>

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

  1. سایدبار چپ : این سایدبار در سمت چپ قرار میگیره و برای اینکار باید علاوه بر کلاس بالایی ، کلاس sb-left رو هم به اون نسبت بدیم. بصورت زیر :
    <div class="sb-slidebar sb-left">
    	<!-- Your left Slidebar content. -->
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos aliquid soluta quas ipsum facere ea eveniet assumenda, officiis deserunt, vero autem, obcaecati perferendis quidem maiores sed. Perspiciatis accusamus consequatur, fuga, alias doloribus assumenda fugit repudiandae error ratione odit laborum eveniet.</p>
    </div>

     

  2.  سایدبار راست : این سایدبار در سمت راست قرار میگیره و برای اینکار باید علاوه بر کلاس بالایی ، کلاس sb-right رو هم به اون نسبت بدیم. بصورت زیر :
    <div class="sb-slidebar sb-right">
    	<!-- Your Right Slidebar content. -->
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti in amet, impedit, omnis iste accusantium consequuntur, facere sed ducimus dolor est quisquam. Non nobis enim excepturi, libero eum dolorum quibusdam omnis delectus ut esse odio, magni corporis atque voluptatum vero!</p>
    </div>

     

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

<div class="sb-slidebar sb-right sb-width-custom" data-sb-width="25%">
	<!-- Your Right Slidebar content. -->
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti in amet, impedit, omnis iste accusantium consequuntur, facere sed ducimus dolor est quisquam. Non nobis enim excepturi, libero eum dolorum quibusdam omnis delectus ut esse odio, magni corporis atque voluptatum vero!</p>
</div>

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

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

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

<button class="sb-toggle-left">Toggle Left</button>


<button class="sb-toggle-right">Toggle Right</button>

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

$(function() {
	$.slidebars({
		siteClose: true,
		disableOver: false,
		scrollLock: true
	});
});

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

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

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

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

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

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

نظرات کاربران

Abbas412

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

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

موفق باشید

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :