پلاگین Scrollspy (پیشرفته)

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


پلاگین Scrollspy

پلاگین Scrollspy برای بروز رسانی خودکار لینک‌ها در یک لیست Navigation براساس مکان پیمایش (به انگلیسی: Scroll) به کار می‌رود.[۱]

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نحوهٔ ایجاد Scrollspy

مثال زیر نحوه ایجاد یک Scrollspy را نشان می‌دهد:

مثال

 1 <!-- The scrollable area -->
 2 <body data-spy="scroll" data-target=".navbar" data-offset="50">
 3 
 4 <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
 5 <nav class="navbar navbar-inverse navbar-fixed-top">
 6 ...
 7   <ul class="nav navbar-nav">
 8     <li><a href="#section1">Section 1</a></li>
 9     ...
10 </nav>
11 
12 <!-- Section 1 -->
13 <div id="section1">
14   <h1>Section 1</h1>
15   <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
16 </div>
17 ...
18 
19 </body>

توضیح مثال

data-spy="scroll" را به عنصری که قرار است به عنوان مکان قابل پیمایش (به انگلیسی: Scrollable) استفاده شود، اضافه کنید (اغلب، این عنصر <body> است).

سپس ویژگی data-target را با مقدار آی دی یا نام کلاس Navigation (به فارسی: نوار) (.navbar) اضافه کنید. این کار برای اطمینان از اتصال Navbar با مکان قابل پیمایش انجام می‌شود.

دقت کنید که عنصرها باید با آی دی لینکهای داخل آیتم‌های Navbar مطابقت داشته باشد (<div id="section1"> با <a href="#section1"> مطابقت داشته باشد).

ویژگی data-offset تعداد پیکسل‌های فاصله از بالا را هنگام محاسبه مکان Scroll تعیین می‌کند. این کار زمانی مفید است که احساس می‌کنید لینک‌های داخل Navbar حالت فعال را خیلی زود تغییر می‌دهند یا خیلی سریع هنگام پرش به عنصرهای قابل پیمایش. مقدار پیش فرض ۱۰ پیکسل است.

نیازمند مکان نسبی: عنصر data-spy="scroll" نیازمند ویژگی مکان CSS با مقدار “relative” است تا به درستی کار کند.

منوی عمودی Scrollspy

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


در این مثال از پیل‌های عمودی Navigation بوت استرپ بعنوان منو استفاده می‌کنیم:

مثال

 1 <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 2 
 3   <div class="container">
 4     <div class="row">
 5       <nav class="col-sm-3" id="myScrollspy">
 6         <ul class="nav nav-pills nav-stacked">
 7           <li><a href="#section1">Section 1</a></li>
 8           ...
 9         </ul>
10       </nav>
11       <div class="col-sm-9">
12         <div id="section1">
13           <h1>Section 1</h1>
14           <p>Try to scroll this page and look at the navigation list while scrolling!</p>
15         </div>
16         ...
17       </div>
18     </div>
19   </div>
20 
21 </body>

مرجع کامل Scrollspy بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Scrollspy، متدها و رویدادها، به مرجع Scrollspy JS بوت استرپ ما مراجعه کنید. .


منابع آموزشی