javascript progress - شريط التقدم التوضيحي bootstrap تويتر على تحميل الصفحة





bar jquery (5)


في حين أن إجابة Tats_innit لها لمسة لطيفة عليها ، كان علي أن أفعلها بشكل مختلف قليلاً لأن لدي أكثر من شريط تقدم في الصفحة.

وهنا الحل الخاص بي:

JSfiddle: http://jsfiddle.net/vacNJ/

HTML (على سبيل المثال):

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="60"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="50"></div>
</div>

<div class="progress progress-success">
<div class="bar" style="float: left; width: 0%; " data-percentage="40"></div>
</div>

جافا سكريبت:

setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

Tats_innit: استخدام setInterval () لاستعادة التقدم بشكل ديناميكي هو حل لطيف ، شريك THX! ؛)

تصحيح:

وكتب صديق لي المساعد مسج جميلة لطيفة لأشرطة التقدم المخصص بوتشراب. إليك عرضًا توضيحيًا: http://minddust.github.com/bootstrap-progressbar/

وهنا ريبو جيثب: https://github.com/minddust/bootstrap-progressbar

لدي صفحة مع العديد من أشرطة التقدم bootstrap. تحديد قيمها في البداية يعمل بشكل جيد. على الرغم من أنني أرغب في أن يؤدي شريط التقدم إلى تحريك / انتقال إلى حالات معينة عندما يفتح مستخدم الصفحة.

هذا JS يعمل بشكل جيد ، عند النقر فوق أحد الأشرطة. كنت بحاجة إلى شيء من هذا القبيل على حدث "onload" من الشريط. لكن حدث "onload" غير متوفر لـ s

//animate progress bars
$('.progress .bar').on("click", function(event) {
  var me = $(this);
  perc = me.attr("data-percentage");
  me.css('width', perc+'%');
});

كيف يمكنني تحقيق هذا السلوك عند تحميل الصفحة لكافة أشرطة التقدم في الصفحة؟




يستخدم Bootstrap انتقالات CSS3 بحيث يتم تحريك أشرطة التقدم تلقائيًا عند تعيين عرض .barbar javascript / jQuery.

http://jsfiddle.net/3j5Je/ ..see؟




تصحيح

  • تم تغيير اسم الفئة من bar إلى bar progress-bar في الإصدار 3.1.1

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>​

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 30px;
    width: 400px;
}​

jQuery المستخدمة في عزف أدناه وعلى document.ready

$(document).ready(function(){

    var progress = setInterval(function() {
        var $bar = $('.bar');

        if ($bar.width()>=400) {
            clearInterval(progress);
            $('.progress').removeClass('active');
        } else {
            $bar.width($bar.width()+40);
        }
        $bar.text($bar.width()/4 + "%");
    }, 800);

});​

عرض

JSFiddle

تحديث JSFiddle




في المساهمة في الإجابة ellabeauty ل. يمكنك أيضًا استخدام قيم النسبة المئوية الديناميكية هذه

$('.bar').css('width',  function(){ return ($(this).attr('data-percentage')+'%')});

وربما إضافة تخفيف مخصص ل CSS الخاص بك

.bar {
 -webkit-transition: width 2.50s ease !important;
 -moz-transition: width 2.50s ease !important;
   -o-transition: width 2.50s ease !important;
      transition: width 2.50s ease !important;
 }



باستخدام الطريقة المباشرة أعلاه ، تمكنت من إدخال الشفرة في علامة تبويب جديدة مباشرةً من نص برمجي في الخلفية على امتداد Chrome. ومع ذلك ، يرجى العلم بأن قسم الكود في الأمر executeScript لن يأخذ المتغيرات ببساطة ، بل فقط سلسلة. لذلك ، بعد التجربة ، وجدت أننا بحاجة إلى إعداد سلسلة الأوامر مسبقًا وتضمين المتغيرات التي نريدها. مثله:

var sendCode = 'document.getElementsByClassName("form-control n-gram")[0].value = "' + TMObj.brand + '";';

var TMUrl = "http://website.com";
chrome.tabs.create({ url: TMUrl }, function(tab){
            chrome.tabs.executeScript(null, {code: sendCode});
      });
});

هذا عمل جيد!





javascript jquery twitter-bootstrap