الفرق بين المراجعتين ل"Bootstrap/scrollspy"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 3: سطر 3:
  
 
== آليّة العمل ==
 
== آليّة العمل ==
−
يتطلّب متتبّع التمرير Scrollspy الأمور التاليّة حتى يعمل على النحو المرغوب:
+
يتطلّب متتبّع التمرير (scrollspy) الأمور التاليّة حتى يعمل على النحو المرغوب:
−
* ملفّ util.js. انتبه له عند بناء ملفّات JavaScript من المصدر.
+
* [[Bootstrap/javascript#Util|ملفّ util.js]]. انتبه له عند بناء ملفّات JavaScript من المصدر.
 
* يجب أن يكون مستخدمًا على مكوِّن تنقّل أو مجموعة قوائم.
 
* يجب أن يكون مستخدمًا على مكوِّن تنقّل أو مجموعة قوائم.
−
* يتطلّب شريط التمرير وجود الخاصيّة <code>position: relative;‎</code> على العنصُر الذي تتتبّعه (متن الصفحة <code><body></code> في العادة).
+
* يتطلّب شريط التمرير وجود الخاصيّة <code>position: relative;‎</code> على العنصُر الذي تتتبّعه (متن الصفحة <code>[[HTML/body|<body>]]</code> في العادة).
−
* تأكّد عند تتبّع عناصر أخرى غير <code><body></code> من تعيين ارتفاع العنصُر (<code>height</code> ) وتطبيق الخاصيّة <code>overflow-y: scroll;‎</code>.
+
* تأكّد عند تتبّع عناصر أخرى غير <code>[[HTML/body|<body>]]</code> من تعيين ارتفاع العنصُر (<code>[[CSS/height|height]]</code>) وتطبيق الخاصيّة <code>[[CSS/overflow-y|overflow-y]]: scroll;‎</code>.
−
* الروابط (<code><a></code>) مطلوبة، ويجب أن تشير إلى العنصُر بمعرِّفه (<code>id</code>).
+
* الروابط (<code>[[HTML/a|<a>]]</code>) مطلوبة، ويجب أن تشير إلى العنصُر بمعرِّفه (<code>id</code>).
 
تُحدَّث عناصر التنقّل ومجموعة القوائم - عند تنفيذ متتبّع التمرير بطريقة صحيحة - تلقائيًّا حسب مرور المحتوى، وسينتقل الصنف من عنصُر إلى آخر في القائمة حسب العناصر المستهدفة المتعلّقة بها.
 
تُحدَّث عناصر التنقّل ومجموعة القوائم - عند تنفيذ متتبّع التمرير بطريقة صحيحة - تلقائيًّا حسب مرور المحتوى، وسينتقل الصنف من عنصُر إلى آخر في القائمة حسب العناصر المستهدفة المتعلّقة بها.
  
سطر 109: سطر 109:
  
 
=== باستخدام خاصيّات البيانات ===
 
=== باستخدام خاصيّات البيانات ===
−
أضف الخاصيّة <code>data-spy="scroll"‎</code>  إلى العنصُر الذي تريد تتبّعه (عادةً <code><body></code>) في شريط التنقّل العلويّ ثم الخاصيّة <code>data-target</code> مع تحديد قيمتها بمعرِّف - أو صنف - العنصُر الأب لأي مكوِّن <code>‎.nav</code> في Bootstrap.<syntaxhighlight lang="css">
+
أضف الخاصيّة <code>data-spy="scroll"‎</code>  إلى العنصُر الذي تريد تتبّعه (عادةً <code>[[HTML/body|<body>]]</code>) في شريط التنقّل العلويّ ثم الخاصيّة <code>data-target</code> مع تحديد قيمتها بمعرِّف - أو صنف - العنصُر الأب لأي مكوِّن <code>‎.nav</code> في Bootstrap.<syntaxhighlight lang="css">
 
body {
 
body {
 
   position: relative;
 
   position: relative;
سطر 127: سطر 127:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
=== كتابة شفرة JavaScript مُخصَّصة ===
+
=== كتابة شفرة JavaScript مخصصة ===
 
استدع متتبّع التمرير - بعد إضافة الخاصيّة <code>position: relative;‎</code> إلى العنصُر قيد التتبّع - بشفرة JavaScript على النحو التالي:<syntaxhighlight lang="javascript">
 
استدع متتبّع التمرير - بعد إضافة الخاصيّة <code>position: relative;‎</code> إلى العنصُر قيد التتبّع - بشفرة JavaScript على النحو التالي:<syntaxhighlight lang="javascript">
 
$('body').scrollspy({ target: '#navbar-example' })
 
$('body').scrollspy({ target: '#navbar-example' })
−
</syntaxhighlight>'''تنبيه:''' يجب أن تتضمَّن روابط شريط التنقّل معرِّفات موجودة فعلا. على سبيل المثال، إذا كان يوجد الرابط <code>‎<a href="#home">‎‎‎الرئيسيّة‎</a>‎‎</code> في شريط التنقل فيجب أن يوجد عنصُر لديه المعرِّف <code>home</code> في كائن المستنَد (مثلًا <code><nowiki><div id="home"></div></nowiki></code>).
+
</syntaxhighlight>'''تنبيه:''' يجب أن تتضمَّن روابط شريط التنقّل معرِّفات موجودة فعلا. على سبيل المثال، إذا كان يوجد الرابط <code>‎‎‎<a href="#home">‎‎‎home</a>‎‎‎</code> في شريط التنقل فيجب أن يوجد عنصُر لديه المعرِّف <code>home</code> في كائن المستنَد (مثلًا <code><nowiki><div id="home"></div></nowiki></code>).
  
 
'''ملحوظة:''' تُتجاهل العناصر المستهدَفة [https://api.jquery.com/visible-selector/ غير المرئيّة لمحدِّد <code>‎:visible</code> في  jQuery]، ولا تُميَّز عناصر التنقّل المتعلّقة بها في شريط التنقّل.
 
'''ملحوظة:''' تُتجاهل العناصر المستهدَفة [https://api.jquery.com/visible-selector/ غير المرئيّة لمحدِّد <code>‎:visible</code> في  jQuery]، ولا تُميَّز عناصر التنقّل المتعلّقة بها في شريط التنقّل.
سطر 136: سطر 136:
 
=== التوابع ===
 
=== التوابع ===
  
−
==== <code>‎.scrollspy('refresh')</code> ====
+
==== <code>‎.scrollspy('refresh')‎</code> ====
−
يجب استدعاء التابع <code>‎.scrollspy('refresh')</code> عند استخدام متبّع التمرير بالتزامن مع إضافة العناصر وحذفها من كائن المستنَد DOM، وذلك على النحو التالي:<syntaxhighlight lang="javascript">
+
يجب استدعاء التابع <code>‎.scrollspy('refresh')‎</code> عند استخدام متبّع التمرير بالتزامن مع إضافة العناصر وحذفها من كائن المستنَد DOM، وذلك على النحو التالي:<syntaxhighlight lang="javascript">
 
$('[data-spy="scroll"]').each(function () {
 
$('[data-spy="scroll"]').each(function () {
 
   var $spy = $(this).scrollspy('refresh')
 
   var $spy = $(this).scrollspy('refresh')
سطر 143: سطر 143:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
==== <code>‎‎.scrollspy('dispose')</code> ====
+
==== <code>‎‎.scrollspy('dispose')‎</code> ====
 
يحذف متتبّع التمرير من العنصُر.
 
يحذف متتبّع التمرير من العنصُر.
  
−
=== الخيّارات ===
+
=== الخيارات ===
 
يمكن تمرير الخيّارات عبر خاصيّات البيانات أو عن طريق JavaScript. ألحق اسم الخيّار بالكلمة <code>data-‎</code> (مثلًا <code>data-offset=""‎</code> للخيّار <code>offset</code>) عند التمرير عبر خاصيّات البيانات.
 
يمكن تمرير الخيّارات عبر خاصيّات البيانات أو عن طريق JavaScript. ألحق اسم الخيّار بالكلمة <code>data-‎</code> (مثلًا <code>data-offset=""‎</code> للخيّار <code>offset</code>) عند التمرير عبر خاصيّات البيانات.
 
{| class="wikitable"
 
{| class="wikitable"
−
|الاسم
+
!الاسم
−
|النوع
+
!النوع
−
|القيمة المبدئيّة
+
!القيمة المبدئيّة
−
|الوصف
+
!الوصف
 
|-
 
|-
−
|offset (الإزاحة)
+
|<code>offset</code> (الإزاحة)
 
|عدد
 
|عدد
−
|10
+
|<code>10</code>
 
|عدد بكسلات الإزاحة من الأعلى عند حساب موضع التمرير.
 
|عدد بكسلات الإزاحة من الأعلى عند حساب موضع التمرير.
 
|}
 
|}

مراجعة 04:45، 14 أبريل 2018

حدِّث مكوِّنات التنقّل أو مجموعات القوائم في إطار العمل Bootstrap بناءً على وضعيّة شريط التمرير للإشارة إلى الرابط الموجود حاليًّا في إطار العرض.

آليّة العمل

يتطلّب متتبّع التمرير (scrollspy) الأمور التاليّة حتى يعمل على النحو المرغوب:

  • ملفّ util.js. انتبه له عند بناء ملفّات JavaScript من المصدر.
  • يجب أن يكون مستخدمًا على مكوِّن تنقّل أو مجموعة قوائم.
  • يتطلّب شريط التمرير وجود الخاصيّة position: relative;‎ على العنصُر الذي تتتبّعه (متن الصفحة <body> في العادة).
  • تأكّد عند تتبّع عناصر أخرى غير <body> من تعيين ارتفاع العنصُر (height) وتطبيق الخاصيّة overflow-y: scroll;‎.
  • الروابط (<a>) مطلوبة، ويجب أن تشير إلى العنصُر بمعرِّفه (id).

تُحدَّث عناصر التنقّل ومجموعة القوائم - عند تنفيذ متتبّع التمرير بطريقة صحيحة - تلقائيًّا حسب مرور المحتوى، وسينتقل الصنف من عنصُر إلى آخر في القائمة حسب العناصر المستهدفة المتعلّقة بها.

مثال على تتبّع شريط تنقّل

يوضّح المثال التالي تمييز عناصر شريط التنقّل حسب المحتوى الذي يمرّ عليه الزائر. يتغيّر الزرّ النشط تلقائيًّا ليوافق الجزء المعروض من المحتوى. ينطبق الأمر كذلك على عناصر القائمة المنسدلة.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

مثال على تتبّع عناصر تنقّل متداخلة

يعمل متتبّع التمرير كذلك عند تداخل أصناف ‎.nav عدّة. عندما يكون عنصُر ‎.nav نشطًا فإنّ عنصُر ‎.nav الأب يظهر نشطًا كذلك.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item2</a>
    <a class="nav-link" href="#item-3">Item3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 2-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

مثال مع مجموعة قوائم

يعمل متتبّع التمرير على نحو مشابه على مجموعات القوائم ( ‎.list-group).

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

استخدام مُلحَق JavaScript

باستخدام خاصيّات البيانات

أضف الخاصيّة data-spy="scroll"‎ إلى العنصُر الذي تريد تتبّعه (عادةً <body>) في شريط التنقّل العلويّ ثم الخاصيّة data-target مع تحديد قيمتها بمعرِّف - أو صنف - العنصُر الأب لأي مكوِّن ‎.nav في Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

كتابة شفرة JavaScript مخصصة

استدع متتبّع التمرير - بعد إضافة الخاصيّة position: relative;‎ إلى العنصُر قيد التتبّع - بشفرة JavaScript على النحو التالي:

$('body').scrollspy({ target: '#navbar-example' })

تنبيه: يجب أن تتضمَّن روابط شريط التنقّل معرِّفات موجودة فعلا. على سبيل المثال، إذا كان يوجد الرابط ‎‎‎<a href="#home">‎‎‎home</a>‎‎‎ في شريط التنقل فيجب أن يوجد عنصُر لديه المعرِّف home في كائن المستنَد (مثلًا <div id="home"></div>).

ملحوظة: تُتجاهل العناصر المستهدَفة غير المرئيّة لمحدِّد ‎:visible في jQuery، ولا تُميَّز عناصر التنقّل المتعلّقة بها في شريط التنقّل.

التوابع

‎.scrollspy('refresh')‎

يجب استدعاء التابع ‎.scrollspy('refresh')‎ عند استخدام متبّع التمرير بالتزامن مع إضافة العناصر وحذفها من كائن المستنَد DOM، وذلك على النحو التالي:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

‎‎.scrollspy('dispose')‎

يحذف متتبّع التمرير من العنصُر.

الخيارات

يمكن تمرير الخيّارات عبر خاصيّات البيانات أو عن طريق JavaScript. ألحق اسم الخيّار بالكلمة data-‎ (مثلًا data-offset=""‎ للخيّار offset) عند التمرير عبر خاصيّات البيانات.

الاسم النوع القيمة المبدئيّة الوصف
offset (الإزاحة) عدد 10 عدد بكسلات الإزاحة من الأعلى عند حساب موضع التمرير.

الأحداث

نوع الحدث الوصف
activate.bs.scrollspy ينطلق هذا الحدث من العنصُر المُتتبَّع ي كلّ مرة ينشِّط فيها متتبّع التمرير عنصُرًا جديدًا في شريط التنقّل. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // افعل شيئًا هنا …
})

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Bootstrap/scrollspy&oldid=6282"