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

YDUI Touch Docs 返回首页

ProgressBar

1、说明

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

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

2、调用

调用方式一(Javascript API)

采用SVG方式实现,宽高占满父级容器。

<div style="width: 150px; height: 150px; margin: 0 auto;" class="progress-bar" id="J_Progress">
<div class="progressbar-content">40%</div>
</div>
<div class="m-button">
<a href="javascript:;" id="J_Set" class="btn-block btn-hollow">手动设置为80%</a>
</div>

<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>
调用方式二(Data API)
10%

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

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

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

3、参数

参数说明类型可选值默认值
type 进度条类型 String linecircle circle
strokeWidth 进度条描边厚度(svg中stroke-width属性值) Number - -
strokeColor 进度条颜色 String && 常规颜色值 - #E5E5E5
trailWidth 高亮进度条描边厚度(不填则取strokeWidth的值) String - -
trailColor 高亮进度条颜色 String && 常规颜色值 - #646464
fill 进度条背景颜色(线形进度条无效) String && 常规颜色值 - -
progress 进度值(取值:0-1) Float - -
delay 是否处于可视区域才执行动画 Boolean - true
binder 监听滚动容器,用于判断当前进度条是否位于可视区域 Object || String(jQuery选择器) - window