EasyUI系列学习(八)-ProgressBar(进度条)
一、创建组件
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;
更多精彩内容请看:http://www.cnblogs.com/2star>