آموزش کار با پلاگین Scrollspy در بوت استرپ

0 دیدگاه

باسلام. توی این مطلب در خدمتتون هستیم با آموزش کار با پلاگین Scrollspy در بوت استرپ. این پلاگین بر اساس موقعیت Scroll به طور خودکار لینک های مربوط به هر بخش را در یک navigation به روز رسانی می کند.

آموزش کار با پلاگین Scrollspy در بوت استرپ در ادامه مطلب، لطفا با ما همراه باشید…

آموزش کار با پلاگین Scrollspy در بوت استرپ

از پلاگین Scrollspy برای اپدیت اتوماتیک لینک ها در یک لیست راهیابی و بر اساس موقعیت اسکرول ، استفاده میشود .

نحوه ساخت Scrollspy

مثال زیر نحوه ساخت Scrollspy را نشان می دهد.

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</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>
...

</body>

...

<li><a href="#section1">Section 1</a></li>

...

</nav>

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation bar while scrolling!</p>

</div>

...

</body>

مشاهده مثال دیگر به همراه دمو

توضیح مثال قبل :

کلاس data-spy=”scroll” را به عنصری که باید به عنوان منطقه قابل پیمایش (scrollable) استفاده شود ، اضافه کنید . ( معولا این عنصر <body> می باشد ) سپس خاصیت data-target را با مقداری به میزان ID یا نام کلاس نوار مسیریابی اضافه کنید. این کار به منظوراطمینان حاصل کردن از اتصال navbar به منطقه قابل پیمایش استفاده میشود.

توجه داشته باشید که عناصر قابل پیمایش باید با Id لینک درون لیست ایتم های navbar همخوانی داشته باشد. (<div id=”section1″> با <a href=”#section1″> همخوانی دارد.)

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

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

منوی عمودی Scrollspy

در این مثال ، از پیل های عمودی مسیریابی (navigation) بوت استرپ به عنوان منو استفاده میکنیم

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1"> 
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div> 
        ...
      </div>
    </div>
  </div>

</body>

<li><a href="#section1">Section 1</a></li>

...

</ul>

</nav>

<h1>Section 1</h1>

<p>Try to scroll this page and look at the navigation list while scrolling!</p>

</div>

...

</div>

</body>

مشاهده مثال دیگر به همراه دمو

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش بوت استرپ

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۳ آذر ۱۳۹۵

آموزش کار با پلاگین Scrollspy در بوت استرپ

آموزش کار با پلاگین Scrollspy در بوت استرپ

نحوه ساخت Scrollspy

منوی عمودی Scrollspy

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط