آموزش کار با Scrollspy؛ یکی از مفاهیم اساسی در آموزش بوت استرپ! آیا می خواهید اطلاعاتی در این زمینه کسب کنید؟ آیا می دانید بخش Scrollspy چیست؟ چگونه می توان از این بخش استفاده کرد؟ این بخش چه کاربردی در بوت استرپ دارد؟
بوت استرپ یکی از فریم ورک های رایج در حوزه وب است که شما می توانید از این فریم ورک استفاده کرده و کارهای مختلفی با آن انجام دهید. بوت استرپ شامل بخش های مختلفی است که می توانید از این بخش ها استفاده کنید. اگر قصد طراحی سایت در ارومیه را دارید، باید با این بخش ها آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد بخش Scrollspy در بوت استرپ برای شما ارائه کنیم و نحوه کار با این بخش را به شما یاد دهیم.
Scrollspy در بوت استرپ چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که Scrollspy چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Scrollspy یکی از بخش های مهم و کاربردی در بوت استرپ است که شما می توانید از این بخش استفاده کرده و تغییراتی روی سایت خودتان اعمال کنید. پلاگین Scroll SPY به ما این امکان را می دهد تا بخش های صفحه را بر اساس موقعیت اسکرول هدف گیری کنیم. در پیاده سازی نوع اولیه آن، همانطور که اسکرول می کنیم، می توانیم کلاس های اکتیو را به نوار ناوبری بر اساس موقعیت اسکرول اضافی کنیم.
جالب است بدانید، از پلاگین Scrollspy در بوت استرپ برای پیمایش صفحه استفاده می شود و با کلیک روی لینک ها به محتوای مربوط به آن لینک پرش می کند. اگر می خواهید نحوه کار با این پلاگین را یاد بگیرید، توصیه می کنیم تا در دوره آموزش بوت استرپ شرکت کنید. به عبارت دیگر، از این پلاگین در بوت استرپ برای ایجاد لینک های پرشی در صفحات وب استفاده می شود. در صورت کلیک روی هر لینک محتوای مرتبط به آن لینک در صفحه نمایش داده می شود و صفحه به آن نقطه پرش می کند.
پلاگین Scrollspy چه کاربردی دارد؟
توجه داشته باشید که پس از آشنایی با کلاس تصاویر در بوت استرپ، Scrollspy یکی از پلاگین های مهم در بوت استرپ است که شما می توانید از این پلاگین استفاده کرده و کارهای مختلفی انجام دهید. با استفاده از پلاگین Scrollspy دسترسی به بخش های مختلف صفحات پر محتوای سایت خودتان را سریع تر و راحت تر کنید. همچنین این ویژگی از خسته شدن کاربران در زمان مرور صفحات وب شما جلوگیری می کنند.
این پلاگین برای بروزرسانی خودکار لینک ها در یک لیست پیمایش بر اساس موقعیت پیمایش مورد استفاده قرار می گیرد. اگر بخواهیم این پلاگین را به صورت جداگانه وارد کنیم، در این صورت به فایل scrollspy.js نیاز خواهیم داشت. این پلاگین تکه کدی است که بر اساس اسکرول کاربر لینک ها را بروزرسانی می کند. حتما این ویژگی را در سایت های مختلفی دیده اید.
چگونه یک Scrollspy در بوت استرپ ایجاد کنیم؟
همانطور که گفته شد، پلاگین Scrollspy به ما کمک می کند تا قسمت های صفحه را طبق موقعیت اسکرول هدف گیری کنیم. همچنین در پیاده سازی و اجرای نوع اولیه آن، همانطور که اسکرول می کنیم، می توانیم کلاس های Active را به نوار ناوبری بر اساس موقعیت اسکرول اضافی کنیم. در صورتی که بخواهیم این پلاگین را به صورت جداگانه وارد بوت استرپ کنیم، در این حالت به فایل Scrollspy.JS نیاز خواهیم داشت. در ادامه سعی می کنیم تا با ذکر مثالی، نحوه ایجاد یک Scrollspy در بوت استرپ را به شما یاد دهیم.
مثال:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <!-- The scrollable area -->
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</ul></nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
<button>کپی</button>
توجه داشته باشید که خاصیت data-spy=Scroll را به پلاگینی که شامل منطقه اسکرول و پرش لینک ها و در واقع عنصر حاوی محتویات هدف است، اعمال کنید. سپس باید خاصیت data-target را که مقدار آن برابر با id یا کلاس عنصر منو است، اضافی کنید.
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد بخش Scrollspy در بوت استرپ برای شما ارائه کنیم و نحوه کار با این بخش را به شما یاد دهیم. همانطور که گفته شد، پلاگین Scrollspy یکی از بخش های مهم در بوت استرپ است که شما می توانید از این پلاگین استفاده کنید. این پلاگین کاربردهای زیادی در بوت استرپ دارد.
نظرات: