سيتم تحديث المكون الإضافي لمراقبة التمرير (ScrollSpy) ، أي التحديث التلقائي لمكون التنقل ، تلقائيًا إلى تحديث هدف التنقل المقابل وفقًا لموقف شريط التمرير. يتمثل تطبيقه الأساسي في إضافة فئة نشطة إلى شريط التنقل استنادًا إلى موضع شريط التمرير أثناء التمرير.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى scrollspy.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. الاستخدام
يمكنك إضافة سلوك الاستماع للتمرير إلى أعلى التنقل:
1. من خلال سمة البيانات: أضف spy = "التمرير" إلى العنصر الذي تريد الاستماع إليه (عادةً ما يكون الجسم). ثم أضف هدف بيانات السمة مع معرف العنصر الأصل لمكون bootstrap .NAV أو خاصية الفئة. لكي تعمل بشكل صحيح ، يجب عليك التأكد من وجود عناصر في جسم الصفحة التي تتطابق مع معرف الرابط الذي تريد الاستماع إليه.
<body data-spy = "scroll" target = ". navbar-example"> ... <iv> <ul> ... </ul> </viv> ... </body>
2. من خلال JavaScript: يمكنك استدعاء مراقبة التمرير من خلال JavaScript ، وتحديد العنصر المراد الاستماع إليه ، ثم استدعاء وظيفة .scrollspy ():
$ ('body'). scrollspy ({target: '.navbar-example'})
2. مراقبة التمرير
يتم استخدام المكون الإضافي للاستماع إلى Scroll لتحديث عناصر التنقل تلقائيًا بناءً على الموضع الذي يوجد فيه شريط التمرير ، وعرض عناصر التنقل المميزة.
// مثال أساسي <nav id = "nav"> <a href = "#"> تطوير الويب </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <s href = "#bootstrap"> bootstrap </a> </li> <li> <span> </span> </a> <ul> <li> <a href = "#jquery"> jQuery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <li> <a href = "#extjs"> extjs </a> بيانات البيانات = "0" تهدف البيانات = "#nav" data-spy = "scroll" style = "الارتفاع: 200px ؛ فائض: Auto ؛ الموضع: النسبية ؛ الحشو: 0 10px ؛ تم ترك HTML5 وغيرها من المعايير. من أجل الترويج لتطوير حركة توحيد الويب ، انضمت بعض الشركات إلى إنشاء مجموعة عمل تكنولوجيا تطبيقات النص النصفي (منظمة ويب لمجموعة عمل تكنولوجيا تطبيقات النص التشعبي-Whatwg. id = "bootstrap" توفر Bootstrap مواصفات HTML و CSS الأنيقة ، وكتبت بلغة CSS الديناميكية أقل. لتحسين الأداء لن تدعم الإصدارات اللاحقة متصفح IE6/8. صفحة HTML منفصلة عن محتوى HTML. إن مجال الرؤية مثل الأمطار ، وقد ظهرت في متصفح سطح المكتب ، وتثرياء مواد التطوير بشكل كبير ومقارنة هذه الإطار في هذه المقالة. المستقبل. .NET ، Java ، PHP ، وما إلى ذلك
هناك سمتان مهمتان ، كما هو مبين في الشكل أدناه:
PS: في قائمة ووقت سهل ، يمكن أن يكون مستهدف البيانات مستقرًا لتحقيق تسليط الضوء على مراقبة التمرير دون إعداد. ولكن عندما لا تربط أحدها عند التنقل المتعدد ، فإن ذلك سيؤدي إلى خطأ ، لذلك عادة ما يجب إضافته.
إذا كنت تستخدم طريقة البرمجة النصية JavaScript ، فيمكنك إزالة البيانات-واستخدام تعريفات سمة البرنامج النصي: الإزاحة والتجسس والهدف. الطرق المحددة هي كما يلي:
// تحديد الخاصية $ ('#content'). scrollspy ({Offset: 0 ، Target: '#Nav' ،}) ؛هناك أيضًا حدث للتبديل إلى إدخال جديد.
// الأحداث ملزمة بالملاحة
$ ('#nav'). on ('Activate.bs.scrollspy' ، function () {
تنبيه ('يتم تشغيل هذا الحدث بعد تنشيط إدخال جديد! ") ؛
}) ؛
هناك أيضًا طريقة لتحديث حاوية DOM في التمرير.
// جزء html
<Section> <h4 id = "html5"> html5 <a href = "#" onClick = "removesec (this)"
// عند حذف المحتوى ، قم بتحديث DOM لتجنب اختلال مراقبة التنقل
دالة removesec (e) {$ (e) .parents ('. sec'). remove () ؛ $ ('#content'). scrollspy ('Refresh') ؛}ملاحظة: يجب أن تستخدم هذه الطريقة البيانات-التصريح.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.