黑马程序员技术交流社区

标题: 分享JQuery EasyUI的学习笔记-progressbar提示框组件 [打印本页]
作者: heshiwei    时间: 2015-9-23 16:18
标题: 分享JQuery EasyUI的学习笔记-progressbar提示框组件
这个是昨天刚学的一块，还是热的。很多笔记记了之后由于种种原因就没有再看了，有时候当做手册翻一翻。这是我学习上的缺点，应该坚持定期的看自己的笔记。子曰：温故而知新。共勉！

属性
        width 'auto'/string 设置进度条的宽度，默认为auto
        height 22/number    设置进度条的高度，默认22
        value  0/number     设置进度条的值，默认0
        text   '{value}%'   设置进度条的模板，默认'{value}%'

事件
        onChange 参数：newVal oldVal  在值更改的时候触发       

方法
        options 参数：none  返回属性对象
        resize 参数：width 组件大小
        getValue 参数:none 返回当前进度值
        setValue 参数：value 设置一个新的进度值

修改默认值：
        $.fn.progressbar.defaults.value = 10;


示例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Easy UI</title>
  5. <meta charset="UTF-8" />
  6. <script type="text/javascript" src="easyui/jquery.min.js"></script>
  7. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  8. <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
  9. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
  10. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

  12. <script type="text/javascript">
  13.         $(function (){
  14.                 $('.pro').progressbar({
  15.                         width:200,
  16.                         height:30,
  17.                         value:40,
  18.                         text:'百分之：{value}',
  19.                         onChange:function (newVal, oldVal){
  20.                                 console.log('新值：'+newVal+"老值："+oldVal);
  21.                         }
  22.                 });

  24.                 $('.pro').click(function (){
  25.                         setInterval(function (){
  26.                                 $('.pro').progressbar('setValue', $('.pro').progressbar('getValue') + 5);
  27.                         },2000);
  28.                 });

  30.        
  31.                 $('.pro').dblclick(function (){
  32.                         $('.pro').progressbar('resize',300);
  33.                 });
  34.                        
  35.         });
  36. </script>
  37. </head>
  38. <body>
  39.         <div class="pro">
  40.                
  41.         </div>
  42. </body>
  43. </html>
复制代码










欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2