دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده
حتما براتون پیش اومده که قسمتی از سایتتون دارای اسکرول باشد و میدونید که اسکرول بار های پیش فرض مرور گرها , بسیار ساده و قطعا کل دیزای سایت شمارو بهم زده و از بین میبرند .
پلاگین های زیادی در این باره در محیط وب قرار داده شده که متاسفانه خیلی از اونها خراب و تعداد کمی هم که سالم هستند اما به دلیل عدم آشنایی بعضی از وبمستران عزیز با 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″]
سلام
این پلاگین برای ctrl+f کار نمیکنه. شما راه حلی دارین؟!
faghat vertical kar mikone . ba in hal mamnoon
سلام برای تغییر سرعت اسکرول چیکار کنیم؟
توی کد ها گشتم و تغییر دادم ولی فرقی نکرد.
سلام خدمت وحید مجیدی.
ببخشین میشه بگین چجوری میشه که این اسکرول رو برای کل صفحه تایین کرد. یا همون کل body.
اگر میشه زود تر جواب بدین مرسی.
این پلاگین برای کل صفحه درست نشده . از دیگر پلاگین ها استفاده نمایید . سرچ در گوگل
سلام اگر بخوام کل body اسکرولش اینطوری بشه باید چیکار کنم
سلام
خیلی ممنون
برای من جواب داد
من تمام این کارارو کردم نوار اسکرول هم اومد.. اما شبیه مثالش نشد… اسکرول پیش فرض اومده .. باید چیکار کنم ؟؟؟ :(
لطفا دمو بزارید تا بررسی بشه
برای من هم همینطوره
یک سایت جوملایی ساختم و در صفحه اصلی که با پسوند پی اچ پی هست همه ی مثال رو که داده بودین کلش رو در صفحم کپی کردم
اما اعمال نشد
و یک پوشه دیگه با همین جیزهایی که در فولدر بود ساختم با پسوند اچ تی ام ال و باز اعمل نشد
میتونید دمو بزارید دوست عزیزم
ضمنا ممنون میشم در فروم این کار رو انجام بدید
با تشکر
جالب بود، ممنون