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

مرجع کار با JS Scrollspy در Bootstrap 4

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

مرجع کار با JS Scrollspy در Bootstrap 4:

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

آموزش فعال سازی Scrollspy با خواص Data Attributes :

خاصیت data-spy=”scroll” را به المنتی که می خواهید به عنوان منطقه اسکرول شونده در صفحه (که معمولا تگ body است)، اضافه نمایید. سپس خاصیت data-target با مقدار Id یا نام کلاس منوی پیمایش (havigation bar) که معمولا کلاس آن navbar است، را به عنصر اعمال کنید. این کار برای اطمینان از اتصال منوی Navbar به منطقه اسکرول شونده در صفحه است. توجه داشته باشید که المنت های درون منطقه اسکرول شونده بایستی با Id لینک های درون منوی navbar یکسان باشند، مثلا id=”Section1”> <div با لینک <a href=”#Section1”>، برابر باشند. همچنین خاصیت اختیاری data-offset، تعیین کننده ارتفاع و فاصله موقعیت عنصر اسکرول، از بالا به پیکسل است. این خاصیت زمانی مفید است که فکر می کنید لینک های درون navbar حالت فعال (active) خود را در هنگام پرش به المنت های منطقه اسکرول شونده خیلی زود یا خیلی دیر تغییر می دهند. مقدار پیش فرض این خاصیت، 10 پیکسل است.

نکته :

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

مثال عملی : در کد مثال عملی زیر، یک منوی Navbar با 4 لینک و یک منطقه اسکرول شونده با 4 بخش مختلف را ایجاد کرده ایم، که در صورت کلیک بر روی هر لینک منو، به منطقه مرتبط با آن در بخش اسکرول شونده، پرش خواهید کرد :

مثال 1








Section 1

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

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

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

به وسیله قطعه کد زیر، در جاوا اسکریپت، می توانید عنصر Scrollspy را فعال و اجرا کنید :

مثال 2

$('body').scrollspy({target: ".navbar"})
امتحان کنید

آموزش کار با ویژگی ها (options) المنت Scrollspy :

ویژگی ها (options) یک Scrollspy را می توانید از طریق خواص data attributes و یا کدهای جاوا اسکریپت، به عنصر اعمال کنید. برای استفاده از خواص data Attributes، بایستی نام option را به خاصیت data-* اضافه کنید، مثل data-offset. جدول زیر، کلیه ویژگی ها (Methods) المنت Scrollspy را توضیح داده است :

نام
نوع
مقدار پیش فرض
توضیح
offset
عدد number.
10
میزان فاصله عنصر Scrollspy از بالا را در هنگام محاسبه موقعیت Scroll تعیین می کند.

آموزش کار با متدها (Methods) عنصر scrollspy :

در جدول زیر، کلیه متدهای عنصر scrollspy را به همراه توضیح ارائه کرده ایم :

متد
توضیح
متد scrollspy(“refresh”)
در هنگام اضافه یا حذف شدن عنصرها از scrollspy، می توانید از این متد برای تازه کردن “refresh” سند یا document استفاده کنید.
متد scrollspy(“dispose”)
این متد، عنصر scrollspy را در صفحه، از بین می برد.

آموزش کار با رویدادها (Events) عنصر scrollspy :

در جدول زیر، به توضیح رویدادهای عنصر scrollspy در Bootstrap 4 پرداخته ایم :

رویداد
توضیحات
active.bs.scrollspy
زمانی که یک آیتم جدید توسط scrollspy فعال می شود، رخ می دهد.
  • 30
  •    38
  • تاریخ ارسال :   1398/09/05

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

ارسال

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

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