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





2 Answers

في حين أن إجابة 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

jquery css android

لدي صفحة مع العديد من أشرطة التقدم 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+'%');
});

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




في المساهمة في الإجابة 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;
 }



Related