| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
dypm
9年前发布

jQuery 的进度条插件:Bootstrap Progressbar

Bootstrap Progressbar 是一个用于推ter bootstrap 2 & 3的 jQuery 进度条插件。它通过添加 Javascript 中预先存在的 CSS 转换提供了动态进度条。此外,你可以在动态进度条中通过回调显示当前进度信息。

jQuery 的进度条插件:Bootstrap Progressbar

代码示例

default values

Progressbar.defaults = {      transition_delay: 300,      refresh_speed: 50,      display_text: 'none',      use_percentage: true,    percent_format: function(percent) { return percent + '%'; },    amount_format: function(amount_part, amount_total) { return amount_part + ' / ' + amount_total; },      update: $.noop,      done: $.noop,      fail: $.noop  };

transition_delay

$(document).ready(function() {      $('.progress .progress-bar').progressbar({          transition_delay: 1500      });  });

animation

  1. horizontal

    • less

      .progress .bar {      .transition(width 2s ease-in-out);  }
    • scss

      .progress.vertical .progress-bar {      @include transition(width 2s ease-in-out);  }
    • css

      .progress .bar {      -webkit-transition: width 2s ease-in-out;      -moz-transition: width 2s ease-in-out;      -ms-transition: width 2s ease-in-out;      -o-transition: width 2s ease-in-out;      transition: width 2s ease-in-out;  }
  2. vertical

    • less

      .progress.vertical .bar {      .transition(height 2s ease-in-out);  }
    • scss

      .progress.vertical .bar {      @include transition(height 2s ease-in-out);  }
    • css

      .progress.vertical .bar {      -webkit-transition: height 2s ease-in-out;      -moz-transition: height 2s ease-in-out;      -ms-transition: height 2s ease-in-out;      -o-transition: height 2s ease-in-out;      transition: height 2s ease-in-out;  }

项目主页:http://www.open-open.com/lib/view/home/1432524963441

 本文由用户 dypm 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1432524963441.html
其他jQuery插件 jQuery插件 Bootstrap Progressbar