Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
شريط التقدم الذي يوفره إطار bootstrap ، مثل الكود في البرنامج التعليمي المبتدئين
<viv> <div rol = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40 ٪ كاملة </span> </viv> </viv>
اسمحوا لي ، المبتدئين الحقيقيين مثلي ، لا أعرف كيف ... دعها تصبح شريط تقدم حقيقي. ومع ذلك ، بعد إدخال Baidu لعدة مرات ، يمكنك فقط تحقيق ذلك عن طريق إضافة رمز jQuery للتعاون. تم تحقيق شهادتي أخيرًا على النحو التالي ، سعيد بعض الشيء.
<div id = "mymodal1" tabIndex = "-1" ald = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true" data-backdrop = "static"> <viv> <span style = "text-align: center ؛ color: red" يتم تحديث الملف ، يرجى عدم تحديث الصفحة! </span> <br/> <viv> <viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
الفقرة أعلاه هي استخدام المربع المنبثقة لاحتواء شريط التقدم. خلاف ذلك ، كيف يمكنني تحقيق شيء يبدأ في الاختباء؟ عند استخدام Bootstrap كقار تقدم أو مربعًا منبثقًا ثابتًا ، فإن إضافة BackDrop = "Static" أفضل ، لأنه بدون هذا التعديل ، يمكنك فقط النقر فوق الماوس وسيختفي المربع المنبثقة.
<cripts> var p = 101 ؛ var stop = 1 ؛ وظيفة التشغيل () {p += 4 ؛ $ ("div [class = bar]"). css ("العرض" ، p + "٪") ؛ var timer = setTimeOut ("run ()" ، 500) ؛ if (p> 100 && stop <1) {p = 0 ؛ }} $ ('#btnsubmit'). انقر فوق (function () {$ ('#mymodal1'). modal ('show') ؛ p = 0 ؛ stop = 0 ؛ run () ؛ $ ('#upload'). sridt () ؛}) ؛ </scripts>في الواقع ، يتم عرض شريط التقدم في Bootstrap من خلال نمط CSS ، طالما أنك تستمر في تعديل قيمة عرض النمط ، يمكنك عرضه. بالطبع ، في دورتي ، لا يمكن اكتشاف صفحة التحديث وإخفائها إلا. إذا كان الأمر كذلك ، فأرسله باستخدام Post ، ثم قم بالحكم بناءً على قيمة الإرجاع ، ثم إخفائه بـ $ ('#mymodal1'). Modal ('Hide') ؛ وتغيير القيمة المقابلة للتوقف إلى 1 ، وإلا فإنها ستستمر في التشغيل.