تتعلم هذه المقالة أساسًا مكون JavaScript - التمرير.
1. القضية
يمكن للمكون الإضافي للاستماع إلى Scroll تحديث علامات التنقل المقابلة تلقائيًا وفقًا لموضع شريط التمرير. يمكنك محاولة تمرير هذه الصفحة ومشاهدة التغييرات في التنقل على اليسار.
ضع الرمز المطبوخ أولاً ، يمكنك التحقق من التأثير عن طريق اختبار الرمز.
<! doctype html> <html> <head> <title> bootstrap </title> <meta name = "viewport" content = "width = width device ، inials-scale = 1.0"> <! <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min <! الفائض: السيارات ؛ الموقف: قريب الحدود: 1 بكسل صلب أحمر. } </style> </head> <body> <viv> <nav id = "navbar-example" rob = "sevigation"> <vir> <button type = "button" data-toggle = "collapse" data-target = ". </button> <a href = "#"> اسم المشروع </a> </viv> <viv> <ul> <li> <a href = "#fat">@fat </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a href = "#" <b> </b> </a> <ul rom = "menu" aria-labelledby = "navbardrop1"> <li> <a href = "#one" tabindex = "-1"> one </a> </li> <li> <li> <a href = "#two" tabindex = "-1" TabIndex = "-1"> ثلاثة </a> </li> </ul> </li> </li> </li> </li> </viv> </nav> <div datafset = "0" data-spy = "scroll" data-target = "#navbar-example"> <h4 id = "fat">@h4> Pitchfork yr enim lo-fi قبل بيع Qui. Tumblr من مزرعة إلى طاولة حقوق الدراجات مهما كان. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irerure. كوسبي سترة لومو جان شورتز ، ويليامزبرغ هوديي الحد الأدنى من Qui ربما لم تسمع عنهم et cardigan ائتمان الصناديق البيولوجية Culpa Wes Anderson Aesthetic. nihil وشم متهمة ، الفضل في السخرية السخرية keffiyeh artisan ullamco نتيجة. </p> <h4 id = "mdo">@mdo </h4> <p> فينام مارفا شارب التزلج ، adipising fugiat velit pitchfork bear. Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat Four Loko Nisi ، EA Helvetica Nulla Carles. Tattooed Cosby Sweater Food Truck ، McSweeney's Quis Non Freegan Vinyl. Lo-Fi Wes Anderson +1 Sartorial. كارلز غير الجمالي التمرين quis gentrify. Brooklyn Adipising Craft Beer Vice Keytar Deserunt. </p> <H4 id = "One"> One </h4> <p> OccaeCat Commodo Aliqua Delectus. fap craft البيرة deserunt skateboard ea. Lomo Bicycle Rights Apising Banh MI ، Velit EA Sunt المستوى التالي Locavore القهوة الفردية في Magna Venia. High Life ID Vinyl ، Echo Park Equis Quis aliquip Banh Mi Pitchfork. Vero VHS est adipising. incectetur nisi diy الحد الأدنى حقيبة الرسول. Cred ex in ، تتكون Delectus المستدامة من Fanny Pack iPhone. </p> <h4 id = "two"> اثنان </h4> <p> في Incididunt Echo Park ، ProDident Master Master Macsweeney الرسمي Thundercats Sapiente Venia. باستثناء Elit VHS ، Proident Shoreditch +1 وقود الديزل الحيوي البيرة الحرفية. القهوة أحادية القهوة Irure Four Loko ، Cupidat Terry Richardson Master Cleanse. من المحتمل أنك لم تسمع عنها Party Fanny Part ، وشم Nulla Cardigan AD الزمني. Proident Wolf Nesciunt Sartorial Keffiyeh Eu Banh Mi مستدامة. Elit Wolf Voluptate ، lo-fi ea portland قبل بيع أربعة لوكو. locavore enim nostrud mlkshk brooklyn nesciunt. </p> <h4 id = "three"> three </h4> <p> ad leggings keytar ، frunch Id Art Party Dolor Labor. Pitchfork yr enim lo-fi قبل بيع Qui. Tumblr من مزرعة إلى طاولة حقوق الدراجات مهما كان. Anim Keffiyeh Carles Cardigan. Velit Seitan McSweeney's Photo Booth 3 Wolf Moon Irerure. كوسبي سترة لومو جان شورتز ، ويليامزبرغ هوديي الحد الأدنى من Qui ربما لم تسمع عنهم et cardigan ائتمان الصناديق البيولوجية Culpa Wes Anderson Aesthetic. nihil وشم متهمة ، الفضل في السخرية البيولوجية keffiyeh الحرفي ullamco نتيجة. </p> <p> Keytar Twee Blog ، Culpa Messenger Bag Marfa مهما كان Delectus Food Truck. معرف SAPIENTE SYNTH DOUSUMENDA. Locavore Sed Helvetica Cliche Irony ، Thundercats ربما لم تسمع عنها نتيجة له هوديي خالية من الغلوتين lo-fi fap aliquip. Labor Elit Place قبل بيعها ، Terry Richardson Brunch Nesciunt Quis Cosby Sweater Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan readymade Velit. VHS شامبراي العمل المؤقت فينام. الرسوم المتحركة Mollit الحد الأدنى من Commodo Ullamco Thundercats. </p> </viv> </viv> <script src = "js/jquery -2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
الاستخدام 1- من خلال سمة البيانات
عن طريق إضافته إلى DIV لعناصر الصفحة التي تحتاجها للاستماع إليها (عادة) ولكن إضافتها إلى DIV ، يمكنك رؤية الكود بنفسك. ثم أضف السمة data-spy = "scroll" إلى div لإضافة وظيفة الاستماع للتمرير بسهولة إلى شريط التنقل العلوي. ثم أضف سمة هدف البيانات إليها ، قيمة هذه السمة هي المعرف أو فئة العنصر الأصل للمكون .NAV في أي bootstrap.
انسخ الرمز كما يلي: <div data dates = "0" data-spy = "scroll" data-target = "#navbar-example">
...........
</div>
يجب أن يكون لعنوان ارتباط الملاحة هدفًا مقابلًا
يجب أن يحتوي عنوان الارتباط في شريط التنقل على عنصر الصفحة المقابلة مع نفس قيمة المعرف.
الاستخدام 2- من خلال JavaScript
ابدأ التمرير في الاستماع عبر JavaScript:
<script type = "text/javaScript"> $ (function () {$ ('. scrollspy-example').قم بإزالة خاصية استهداف البيانات الخاصة بها عن طريق وضع فئة النمط كمؤسس Scrollspy-example Div. هذا يسمح لك أيضًا بتبديل عجلة الماوس.
2. الطريقة
.scrollspy ('Refresh')
عند استخدام المكون الإضافي للاستماع إلى التمرير ، يجب استدعاء هذه الطريقة عندما يتم إضافة عنصر الصفحة أو حذفه من DOM في الصفحة ، على النحو التالي:
انسخ رمز الرمز كما يلي: $ ('[data-spy = "scroll"]'). كل (function () {var $ spy = $ (this) .scrollspy ('Refresh')})
3. الخيارات
يمكن تمرير الخيارات من خلال خصائص البيانات أو JavaScript. بالنسبة لسمات البيانات ، تحتاج إلى وضع اسم الخيار بعد البيانات ، على سبيل المثال بيانات البيانات = "".
4. الأحداث
<script type = "text/javaScript"> $ ('#navbar-example'). on ('Activate.bs.scrollspy' ، function () {Alert (1) ؛}) </script>أخيرًا ، ملاحظة: بالطبع ، تحتاج إلى إضافة أشرطة التمرير إلى محتوى مراقبة التمرير ، أي أنك تحتاج إلى إضافة أنماط مقدمًا.
<style type = "text/css"> .scrollspy-example {height: 200px ؛ الفائض: السيارات ؛ الموقف: قريب الحدود: 1 بكسل صلب أحمر. } </style>إعطاء محتوى DIV ارتفاع معين.
ما ورد أعلاه هي ملاحظات التعلم لتمرير Bootstrap ومراقبة المحتوى ذي الصلة. إذا كنت لا تزال ترغب في متابعة تعلم Bootstrap ، فيمكنك النقر هنا لمواصلة التعلم. آمل أن يكون مفيدًا لتعلمك. آمل أيضًا أن تستمر في الانتباه إلى محتوى أكثر إثارة من Wulin.com.