جهت ورود به تالار گفتمان سایت کلیک کنید


دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده

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

پلاگین های زیادی در این باره در محیط وب قرار داده شده که متاسفانه خیلی از اونها خراب و تعداد کمی هم که سالم هستند اما به دلیل عدم آشنایی بعضی از وبمستران عزیز با Jquery , آموزش نصفه نیمه ای در مورد پلاگین بیان میکنند و قطعا به درد کاربر نمیخورد .

برای این ساعت از سایت اسکریپت دات کام , پلاگین بسیار حرفه ای , کامل و زیبایی رو در اختیار شما عزیزان قرار میدهم که از این پس نیازی به پلاگین های سایت های دیگر نداشته باشید .

در این پست , هم آموزش کامل نصب ابن پلاگین ها و هم نمونه باکس طراحی شده گنجانده شده است .

برای این کار ابتدا شما نیاز به 1 فایل Css و 4 فایل Jquery دارید . من برای راحتی و زیبایی کار این 5 فایل رو در پوشه های مخصوص با موضوع خودشون قرار دادم . یعنی فایل Css در پوشه Css و 4 فایل Jquery رو در پوشه ی Jquery قرار دادم.

ابتدا این دو پوشه رو از اینجا دانلود کنید و سپس در روت سایت خود قرار دهید . (طبیعتا تمامی آدرس دهی ها به نسبت Root سایت انجام شده و اگر شما بخواهید در پوشه های دیگر استفاده کنید , باید آدرس های فایل رو تغییر دهید . البته پیشنهاد میشود این کار رو انجام ندهید )

حال نوبت آموزش می باشد …

در ابتدا شما باید در صفحه ویا صفحاتی که میخواهید این اسکرول بار رو استفاده کنید , این 5 فایل رو بهش بشناسونید .

برای این کار ابتدا در بین دو تگ <head> و <head/> , باید با کد زیر, Css رو بشناسونید .

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

حال نوبت شناسایی فایل های Jquery به صفحه میباشد .

در 2 تا مانده به آخرین خط صفحه ( یعنی قبل از دو تگ <html/> و <body/> ) , کد های زیر رو کپی کنید .

	<script src="jquery/jquery-1.7.2.min.js"></script>
	<script src="jquery/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="jquery/jquery.mousewheel.min.js"></script>
	<script src="jquery/jquery.mCustomScrollbar.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar({
					scrollButtons:{
						enable:false
					}
				});
			});
		})(jQuery);
	</script>

طبیعتا برای اعمال این پلاگین بر روی سایت خود , باید یک Div بسازید تا باکس ساخته شده رو با آی دی و یا کلاس , به این پلاگین متصل کنید .

برای این کار یک Div به عنوان نمونه با کلاس content بسازید . برای این کلاس حتما یک Height مشخص بدهید . این کار برای اینست که با زیاد کردن اطلاعات و نوشیته های داخل Div , از یک ارتفاعی به بعد , اسکرول  بار لحاظ و نمایش داده شود . چون اگر یک ارتفاع مشخص ندهید , به میزان اطلاعات داخل , Div هم کشیده میشود و اصلا اسکرول نمی اندازد .

نکته مهم : برای Div خود هر کلاس و یا آی دی که انتخاب میکنید , حتما باید نام آن را جایگزین نام فعلی $(“content.”) که در بالا نوشته شده است بکنید . بدیهی است اگر آی دی انتخاب کردید , باید

$("#content").mCustomScrollbar({

و اگر به مانند مثال بالا از کلاس استفاده کردید , باید

$(".content").mCustomScrollbar({

را جایگذین کنید .

آموزش های مربوط به دیزاین :

شما به راحتی میتوانید موقعیت مکانی و رنگ های مربوط به اسکرول را به دلخواه خود تغییر دهید.

برای این کار , پس از نصب پلاگین , وارد فایل Css با آدرس زیر شوید :

css/jquery.mCustomScrollbar.css

این فایل رو با NotePad و یا DreamWeaver باز کنید . حال با توجه به اطلاعات زیر , دیزاین را تغییر دهید :

1 – فاصله از سمت راست Div = خط 3

2 – پهنا و ارتفاع خط کمرنگ و زمینه اسکرول بار = خط 29 و 30

2 – پهنا و ارتفاع خط ضخیم و اصلی اسکرول بار = خط 43 و 44

4 – شفافیت حالت معمولی و حالت Hover = خط 137 و 140

5 – تغییر رنگ ها = خطهای 143 و 147 و 151 و 156

توجه : 5 نکته ی بالا فقط مهمترین خصوصیات قسمت های Css این پلاگین میباشد . طبیعتا اگر با کدهای Css آشنایی کامل دارید , میتوانید تغییرات بسیار بیشتری در دیزاین بدهید .

پخش اختصاصی

آموزش : وحید مجیدی 

دانلود نمونه آماده این پلاگین , جهت آشنایی بیشتر

[sdm-download id=”997″ fancy=”0″]

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

12 پاسخ به “دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده”

  1. mrs گفت:

    سلام
    این پلاگین برای ctrl+f کار نمیکنه. شما راه حلی دارین؟!

  2. mrlaseptima گفت:

    faghat vertical kar mikone . ba in hal mamnoon

  3. مجتبی گفت:

    سلام برای تغییر سرعت اسکرول چیکار کنیم؟
    توی کد ها گشتم و تغییر دادم ولی فرقی نکرد.

  4. Modern PS گفت:

    سلام خدمت وحید مجیدی.
    ببخشین میشه بگین چجوری میشه که این اسکرول رو برای کل صفحه تایین کرد. یا همون کل body.
    اگر میشه زود تر جواب بدین مرسی.

    • وحید مجیدی گفت:

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

  5. سینا گفت:

    سلام اگر بخوام کل body اسکرولش اینطوری بشه باید چیکار کنم

  6. ابراهیم گفت:

    سلام
    خیلی ممنون
    برای من جواب داد

  7. neda گفت:

    من تمام این کارارو کردم نوار اسکرول هم اومد.. اما شبیه مثالش نشد… اسکرول پیش فرض اومده .. باید چیکار کنم ؟؟؟ :(

    • وحید مجیدی گفت:

      لطفا دمو بزارید تا بررسی بشه

      • کاظمی گفت:

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

        • وحید مجیدی گفت:

          میتونید دمو بزارید دوست عزیزم

          ضمنا ممنون میشم در فروم این کار رو انجام بدید

          با تشکر

  8. بهینه سازی گفت:

    جالب بود، ممنون

پاسخ دادن به مجتبی لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *