嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

ProgressBar

1、说明

1.1、示例:http://m.ydui.org/html/progressbar.html

1.2、进度条插件(线形进度条和圈形进度条),采用SVG方式实现,宽高占满父级容器;借鉴 Bootstrap 先进思想,支持Data API 和 Javascript API方式调用;

2、参数

2.1、包含9个参数:

<script>
$('#content').progressBar({
type: 'circle', /* 进度条类型【取值:'line' 或 'circle',默认:'circle'】 */
strokeWidth: 0, /* 进度条描边厚度【必填,取值为正数,svg中stroke-width属性值】 */
strokeColor: '#E5E5E5', /* 进度条颜色 */
trailWidth: 0, /* 高亮进度条描边厚度【选填,不填则取strokeWidth的值】 */
trailColor: '#646464', /* 高亮进度条颜色 */
fill: '', /* 进度条背景颜色【线形进度条无效】 */
progress: 0, /* 进度值【取值:0-1】 */
delay: true, /* 是否处于可视区域才执行动画【默认:true】 */
binder: window /* 监听滚动容器,用于判断当前进度条是否位于可视区域【默认:window】 */
});
</script>

3、调用方式一(Javascript API)

3.1、每个js组件都是独立的jQuery插件,调用方式跟普通插件一样;

<div style="width: 2rem; height: 2rem;" class="progress-bar" id="J_Progress"></div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
$('#J_Progress').progressBar({
type: 'circle',
strokeWidth: 2,
strokeColor: '#B2B2B2',
trailWidth: 5,
trailColor: '#FE5D51',
fill: '#FFF',
progress: .4
});
</script>

3.2、手动设置进度条进度;

<div style="width: 2rem; height: 2rem;" class="progress-bar" id="J_Progress"></div>

<div class="m-button">
<a href="javascript:;" id="J_Set" class="btn-block btn-hollow">手动设置为80%</a>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
$('#J_Progress').progressBar({
type: 'circle',
strokeWidth: 2,
strokeColor: '#B2B2B2',
trailWidth: 5,
trailColor: '#FE5D51',
fill: '#FFF',
progress: .4
});

$('#J_Set').on('click', function () {
/* 手动设置进度为80% */
$('#J_Progress').progressBar('set', .8);
});
</script>

4、调用方式二(Data API)

4.1、在容器.progress-bar上添加data-ydui-progressbar属性,并设置相应参数;

<div style="width: 2rem; height: 2rem;" class="progress-bar" data-ydui-progressbar="{type: 'cricle', strokeWidth: 4, progress: .1}">
<div class="progressbar-content">10%</div>
</div>

<div style="height: .15rem;width: 100%;" class="progress-bar" data-ydui-progressbar="{type: 'line', strokeWidth: 4, progress: .4, trailColor: '#FE5D51'}"></div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>

5、纯样式实现方式

5.1、样式实现线形进度条

<div class="m-progressbar">
<div class="trail-line trail-line-bg" style="width: 50%;"></div>
</div>

5.2、通过重置.trail-line-bg样式,自定义进度条背景图片

<style>
/* 重置.trail-line-bg样式,自定义进度条背景图片 */
.trail-line-bg {
background-image: url(../img/pb_bg.png);
background-repeat: repeat-x;
background-size: 14px 9px;
}
</style>

<div class="m-progressbar">
<div class="trail-line trail-line-bg" style="width: 50%;"></div>
</div>

6、参与讨论

6.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。