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

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

<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>

<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>

<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>

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

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

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

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