آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با Scrollspy در بوت استرپ 4

دوره های مرتبط با این مقاله

آموزش کار با Scrollspy در بوت استرپ 4:

از کامپوننت Scrollspy در Bootstrap 4 برای ایجاد لینک های پرشی در صفحات وب استفاده می شود. در صورت کلیک بر روی هر لینک محتوای مرتبط به آن لینک در صفحه یا عنصر دربرگیرنده، نمایش داده خواهد شد و صفحه به آن نقطه پرش می کند.

آموزش نحوه ایجاد یک Scrollspy در بوت استرپ 4:

از کد زیر برای ایجاد یک Scrollspy در Bootstrap 4 استفاده می شود. به کد دقت نمایید، سپس به تشریح نکات مهم آن پرداخته ایم :

مثال 1








Section 1

Try to scroll this page and look at the navigation bar while scrolling!

...
امتحان کنید

خاصیت data-spy=” Scroll” را به المنتی که دربرگیرنده منطقه اسکرول و پرش لینک ها و درواقع عنصر حاوی محتویات هدف است، اعمال کنید.

سپس خاصیت data-target را که مقدار آن برابر با Id یا کلاس عنصر منوی Navigation Bar است، اضافه کنید (کلاس navbar).

این کار برای اطمینان از اتصال منوی navbar به منطقه اسکرول شونده و دربرگیرنده محتوی است.

دقت کنید که المنت های اسکرول شونده دارای id ای معادل خاصیت href لینک لیست آیتم های درون منوی navbar باشند، مثلا تگ div دارای id معادل “section1” بوده که با خاصیت href تگ a معادل #section1 برابر است.

در نهایت خاصیت اختیاری data-offset تعیین کننده تعداد پیکسل فاصله از بالای عنصر اسکرول شونده است که در هنگام محاسبه موقعیت آن، لحاظ خواهد شد. این خاصیت زمانی کاربرد دارد که شما احساس می کنید لینک های درون منوی navbar، حالت فعال بودن (active state) خود را در هنگام پرش به عناصر اسکرول شونده، خیلی زود، تغییر می دهند. مقدار پیش فرض آن 10 پیکسل است.

نکته :

المنت با خاصیت data-spy=”scroll” نیازمند خاصیت موقعیت CSS Position برابر با حالت relative است تا درست کار کند.

آموزش ایجاد Scrollspy عمودی در بوت استرپ 4:

در کد مثال عملی زیر، از دکمه های pills بوت استرپ 4، برای ایجاد Scrollspy عمودی استفاده کرده ایم. به کد مثال و تفاوت آن با کد قبل دقت نمایید :

مثال 2



  

Section 1

Try to scroll this page and look at the menu while scrolling!

...
امتحان کنید

مرجع کامل آموزش Scrollspy در بوت استرپ 4:

برای دریافت آموزش کامل خواص، متدها و رویدادهای کامپوننت Scrollspy به بخش مرجع آموزش Scrollspy در بوت استرپ 4، سایت تحلیل داده بروید.

  • 45
  •    6
  • تاریخ ارسال :   1398/08/09

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .