Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--استفاده از پلاگین Scrollspy در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت شانزدهم آموزش در زیر قرار داده شده است.

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

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

چطور یک Scrollspy ایجاد کنیم؟

ابتدا به المانی که Scrollspy را میخواهیم در آن قرار دهیم و باید Scroll  شود خصوصیت  "data-spy="scroll را اختصاص می دهیم

(اغلب این خصوصیت را به تگ Body  اختصاص می دهند)

سپس خصوصیت data-target را به المانمان اضافه میکنیم که مقدار آن یک ID یا Class از  navigation bar ما می باشد

این کار باعث اطمینان از اتصال منوی( navbar) ما با Scrollspy می شود

توجه داشته باشید که هر بخش از Scrollspy  باید با ID لینک های داخل لیست نوار پیمایش مطابقت کنند

(<div id="section1"> matches <a href="#section1">)

خصوصیت data-offset برای محاصبه تعداد پیکسل ها برای محاصبه موقعیت  Scroll می باشد که گذاشتن آن اختیاری می باشد و . به طور پیش فرض 10 پیکسل است.

<body data-spy="scroll" data-target=".navbar" data-offset="50">

مثال زیر چگونگی ایجاد یک 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">

  <div class="container-fluid">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                       

      </button>

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav">

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

          <li><a href="#section2">Section 2</a></li>

          <li><a href="#section3">Section 3</a></li>

          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span                          class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="#section41">Section 4-1</a></li>

              <li><a href="#section42">Section 4-2</a></li>

            </ul>

          </li>

        </ul>

      </div>

    </div>

  </div>

</nav>   

<!-- Section 1 -->
<div id="section1" class="container-fluid">

  <h1>Section 1</h1>

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

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

</div>

<!-- Section 2 -->

<div id="section2" class="container-fluid">

  <h1>Section 2</h1>

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

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

</div>

<!-- Section 3 -->

<div id="section3" class="container-fluid">

  <h1>Section 3</h1>

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

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

</div>

<!-- Section 4-1 -->

<div id="section41" class="container-fluid">

  <h1>Section 4 Submenu 1</h1>

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

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

</div>

<!-- Section 4-2 -->

<div id="section42" class="container-fluid">

  <h1>Section 4 Submenu 2</h1>

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

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

</div>
</body>

اجرای مثال بالا :

 

6358379288574675451.png

6358379296934853632.png

6358379303269415943.png

6358379306020973324-1.png

6358379310731642764-2.png

در مثال زیر از منوی عمودی Pills  بوت استرپ به عنوان منو استفاده شده است

<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>

اجرای مثال به صورت زیر می باشد

6358379336720829255.png

پایان قسمت شانزدهم

 ادامه آموزش در قسمت هفدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.