اسکرول طراح

دموی اسکرول با ارتفاع مشخص با افکت و پشتیبانی از اسکرول موس

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

طرز استفاده : برای استفاده ابتدا می بایست کتابخانه های لازم را لود کنید : اولی که استایل خود پلاگین است ، دومی کتابخانه Jquery هست که اگر قبلا در سایتتان لود کردید لازم نیست دوباره این کار را بکنید . سومی jquery-ui که کتابخانه توسعه دهنده ی Jquery می باشد و دارای پلاگین های آماده زیادی می باشد . سومی افکت Ease ایجاد می کند و چهارمی برای استفاده از حرکت اسکرول موس در اسکرول کردن استفاده می شود . طرز استفاده : برای استفاده ابتدا می بایست کتابخانه های لازم را لود کنید : اولی که استایل خود پلاگین است ، دومی کتابخانه Jquery هست که اگر قبلا در سایتتان لود کردید لازم نیست دوباره این کار را بکنید . سومی jquery-ui که کتابخانه توسعه دهنده ی Jquery می باشد و دارای پلاگین های آماده زیادی می باشد . سومی افکت Ease ایجاد می کند و چهارمی برای استفاده از حرکت اسکرول موس در اسکرول کردن استفاده می شود . طرز استفاده : برای استفاده ابتدا می بایست کتابخانه های لازم را لود کنید : اولی که استایل خود پلاگین است ، دومی کتابخانه Jquery هست که اگر قبلا در سایتتان لود کردید لازم نیست دوباره این کار را بکنید . سومی jquery-ui که کتابخانه توسعه دهنده ی Jquery می باشد و دارای پلاگین های آماده زیادی می باشد . سومی افکت Ease ایجاد می کند و چهارمی برای استفاده از حرکت اسکرول موس در اسکرول کردن استفاده می شود .

اسم آیدی mcs_container مهم نیست و فقط برای تمیز دادن بین چند اسکرول در یک صفحه از آیدی های مختلف استفاده می کنیم . اما کلاس های container و content لازم میس باشند که به همین شکل مطالب درون کلاس content قرار بگیرند . در مرحله آخر کافیست پلاگین را لود کنید و مشخصات دلخواه برای اسکرول را بصورت تابع به پلاگین بدهید : اسم آیدی mcs_container مهم نیست و فقط برای تمیز دادن بین چند اسکرول در یک صفحه از آیدی های مختلف استفاده می کنیم . اما کلاس های container و content لازم میس باشند که به همین شکل مطالب درون کلاس content قرار بگیرند . در مرحله آخر کافیست پلاگین را لود کنید و مشخصات دلخواه برای اسکرول را بصورت تابع به پلاگین بدهید : اسم آیدی mcs_container مهم نیست و فقط برای تمیز دادن بین چند اسکرول در یک صفحه از آیدی های مختلف استفاده می کنیم . اما کلاس های container و content لازم میس باشند که به همین شکل مطالب درون کلاس content قرار بگیرند . در مرحله آخر کافیست پلاگین را لود کنید و مشخصات دلخواه برای اسکرول را بصورت تابع به پلاگین بدهید :

همانطور که مشاهده می کنید در خط سوم برای آیدی mcs_container تابع mCustomScrollbar اعمال شده است که از چپ به راست مشخصات زیر را به آن داده ایم : 1- عمودی 2- زمان افکت ease 3- نوع افکت ease 4- مقدار فضای اضافی که به اسکرول عمودی فقط میدهیم ، این گزینه ارتفاع برای اسکرول عمودی و عرض برای افقی را مشخص می کند که بصورت auto باشد یا fix ( حالت auto بصورت خودکار ارتفاع را بر اساس حجم متن تنظیم می کند ) ، 5- پشتیبانی از حرکت اسکرول موس روی اسکرول صفحه 6- استفاده از دگمه برای حرکت اسکرول 7 - سرعت حرکت اسکرول در هنگام زدن دگمه ساخته شده در مرحله قبل ( 1 کمترین سرعت و 20 بیشترین سرعت ) همانطور که مشاهده می کنید در خط سوم برای آیدی mcs_container تابع mCustomScrollbar اعمال شده است که از چپ به راست مشخصات زیر را به آن داده ایم : 1- عمودی 2- زمان افکت ease 3- نوع افکت ease 4- مقدار فضای اضافی که به اسکرول عمودی فقط میدهیم ، این گزینه ارتفاع برای اسکرول عمودی و عرض برای افقی را مشخص می کند که بصورت auto باشد یا fix ( حالت auto بصورت خودکار ارتفاع را بر اساس حجم متن تنظیم می کند ) ، 5- پشتیبانی از حرکت اسکرول موس روی اسکرول صفحه 6- استفاده از دگمه برای حرکت اسکرول 7 - سرعت حرکت اسکرول در هنگام زدن دگمه ساخته شده در مرحله قبل ( 1 کمترین سرعت و 20 بیشترین سرعت ) همانطور که مشاهده می کنید در خط سوم برای آیدی mcs_container تابع mCustomScrollbar اعمال شده است که از چپ به راست مشخصات زیر را به آن داده ایم : 1- عمودی 2- زمان افکت ease 3- نوع افکت ease 4- مقدار فضای اضافی که به اسکرول عمودی فقط میدهیم ، این گزینه ارتفاع برای اسکرول عمودی و عرض برای افقی را مشخص می کند که بصورت auto باشد یا fix ( حالت auto بصورت خودکار ارتفاع را بر اساس حجم متن تنظیم می کند ) ، 5- پشتیبانی از حرکت اسکرول موس روی اسکرول صفحه 6- استفاده از دگمه برای حرکت اسکرول 7 - سرعت حرکت اسکرول در هنگام زدن دگمه ساخته شده در مرحله قبل ( 1 کمترین سرعت و 20 بیشترین سرعت )

( توجه کنید که اگر چند اسکرول در صفحه قرار می دهید فقط تخصیص دادن تابع mCustomScrollbar باید تکرار شود و لود کردن کتابخانه ها در اول نوشته و لود کردن پلاگین در آخرین خط کد ها دوباره لازم نیست ، فقط می بایست به آیدی المان دیگر ، خط دوم تا چهارم را تکرار کنیم ) در فایل دانلودی 3 فایل HTML هست که سایت سازنده آن را ایجاد کرده که برای حالت های مختلف مثل داشتن دگمه ، لود داینامیک یا مثال آورده شده ، سورس آنها را ببینید همچنین دمویی که اینجا آپلود کردم را هم می توانید مشاهده کنید .

بازگشت به پست در وبلاگ