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）
40%
手动设置为80%

采用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 line、circle 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