EasyUI系列学习-ProgressBar(进度条)

Posted 2020-06-14

一、创建组件

1.class加载

<div class="easyui-progressbar"></div>

2.js加载

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar();
    })
</script>

二、属性

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            //进度条宽度，默认auto
            width: "400",
            //进度条高度，默认为22
            height: 30,
            //进度条值，默认为0
            value: 60,
            //设置进度条百分比模板
            text: "{value}%"
        });
    })
</script>

生成的html

<div id="pb" class="progressbar" style="width: 398px; height: 28px;">
    <div class="progressbar-text" style="width: 398px; height: 28px; line-height: 28px;">60%</div>
    <div class="progressbar-value" style="width: 60%; height: 28px; line-height: 28px;">
        <div class="progressbar-text" style="width: 398px; height: 28px; line-height: 28px;">60%</div>
    </div>
</div>

三、事件

onChange：在值更改的时候触发

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            value: 60,
            onChange: function (newValue, oldValue) {
                console.log("新：" + newValue + "，旧：" + oldValue);
            }
        });
        setTimeout(function () {
            $("#pb").progressbar("setValue", 70);
        }, 1000);
        setInterval(function () {
            $("#pb").progressbar("setValue", $("#pb").progressbar("getValue") + 5);
        }, 1000);
    })
</script>

四、方法

1.options

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({

        });
        console.log($("#pb").progressbar("options"));
    })
</script>

输出的结果

2.resize

<div id="pb"></div>
<script>
    $(function () {
        $("#pb").progressbar({
            value: 60
        });
        //设置组件长度
        $("#pb").progressbar("resize", "500");
    })
</script>

3.getValue，setValue

五、设置默认值

$.fn.progressbar.defaults.value = 60;