jQuery EasyUI,ProgressBar(进度条)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 ProgressBar(进度条)组件的使用方法,这个组件不依赖 于其他组件。

一.加载方式

//class 加载方式
<div class="easyui-progressbar"
  data-options="value:60" style="width:400px;">
</div>
//JS 加载调用
$('#box').progressbar({
  value : 60,
});

二.属性列表

width  string 设置进度条宽度。默认为 auto。

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width:500, //设置进度条宽度
height:20 //设置进度条高度
});
});

height  number 设置进度条高度。默认为 22。

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width:500, //设置进度条宽度
height:20 //设置进度条高度
});
});

value  number 设置进度条值。默认为 0。,设置进度条值

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width:500, //设置进度条宽度
height:20, //设置进度条高度
value:50 //设置进度条值
});
});

text  string 设置进度条百分比模版:默认{value}%,就是设置进度条的提示文字,默认是获取进度条的值加上%号

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width:500, //设置进度条宽度
height:20, //设置进度条高度
value:50, //设置进度条值
text : '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
});

三.事件列表

onChange  newValue,oldValue 在值更改的时候触发,接收两个参数,分别接收进度新值,和旧值

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 50, //设置进度条值
text: '{value}%', //设置进度条的提示文字,默认是获取进度条的值加上%号
onChange: function (newValue, oldValue) { //在值更改的时候触发
alert('新:' + newValue + ',旧:' + oldValue); //分别接收进度新值,和旧值
}
});
setTimeout(function () { //定时器1秒钟
$('#box').progressbar('setValue', 70); //将进度改变为70%
}, 1000);
});

动画进度效果

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 50, //设置进度条值
text: '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
setInterval(function () { //定时器200毫秒,获取当前进度值加5,循环设置成新值
$('#box').progressbar('setValue',$('#box').progressbar('getValue') + 5);
}, 200);
});

三.方法列表

options  none 返回属性对象

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 5, //设置进度条值
text: '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
alert($('#box').progressbar('options')); //返回属性对象
});

resize  width 组件大小

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 5, //设置进度条值
text: '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
$('#box').progressbar('resize',800); //设置组件大小
});

getValue  none 返回当前进度值

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 5, //设置进度条值
text: '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
alert($('#box').progressbar('getValue')); //返回当前进度值
});

setValue  value 设置一个新的进度值

/**
<div id="box"></div>
**/ $(function () {
$('#box').progressbar({
width: 500, //设置进度条宽度
height: 20, //设置进度条高度
value: 5, //设置进度条值
text: '{value}%' //设置进度条的提示文字,默认是获取进度条的值加上%号
});
$('#box').progressbar('setValue',80); //设置一个新的进度值
});

$.fn.progressbar.defaults 重写默认值对象。

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

第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件的更多相关文章

  1. progressbar进度条组件

    Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...

  2. EasyUI Progressbar 进度条

    通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...

  3. ProgressBar( 进度条) 组件

    一. 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...

  4. EasyUI - Progressbar 进度条控件

    效果: html代码: <div id="p" style="width:400px;"></div> JS代码: $(function ...

  5. 第一百九十九节,jQuery EasyUI,Panel(面板)组件

    jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...

  6. 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件

    jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...

  7. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  8. 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件

    jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...

  9. 第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置

    第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...

随机推荐

  1. Delphi 设置时间格式

    // 设置WINDOWS系统的短日期的格式SetLocaleInfo(LOCALE_SYSTEM_DEFAULT, LOCALE_SSHORTDATE, 'yyyy-MM-dd'); Applicat ...

  2. Linux-C网络编程之epoll函数

    上文中说到假设从100的不同的地方取外卖,那么epoll相当于一部手机,当外卖到达后,送货员能够通知你.从而达到每去必得,少走非常多路. 它是怎样实现这些作用的呢? epoll的功能 epoll是se ...

  3. cs-SelectTree-DropTreeNode, SelectTreeList

    ylbtech-Unitity: cs-SelectTree-DropTreeNode, SelectTreeList DropTreeNode.cs SelectTreeList.cs 1.A,效果 ...

  4. 后台SQL注入实例

    简要描述: 汉庭连锁酒店后台SQL注入,可绕过登陆限制进入后台,可脱库. 详细说明: 问题发生在这个站点.http://miaosha.htinns.com/ 标题内没有写具体信息.因为怕发布后被人入 ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何快速调整大量控件的位置

    打开元素列表,然后直接从顶部按住Shift批量选中控件即可     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的 ...

  6. Digg工程师讲述Digg背后的技术

    虽然最近业绩有所下滑,也出现了一些技术故障,但Digg作为首屈一指的社会化新闻网站,其背后的技术还是值得一探,Digg工程师 Dave Beckett 在今年4月份写一篇名为<How Digg ...

  7. Ios 调用Appstore 下载界面 [[UIApplication sharedApplication] openURL

    http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?mt=8&id=286274367 id = itunesconn ...

  8. python——数据结构之单链表的实现

    链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结点都包含了可以链接起来的地址 信息,所以用一个变量 ...

  9. OpenERP为form和tree视图同时指定view_id的方法

    Odoo,OpenERP中文网 / 2014-07-16 文所说的是关于OpenERP中同一个对象(同名继承)使用view_id来指定form和tree视图的方法,由于官方文档中Views and E ...

  10. Qt学习 之 多线程程序设计

    QT通过三种形式提供了对线程的支持.它们各自是, 一.平台无关的线程类 二.线程安全的事件投递 三.跨线程的信号-槽连接. 这使得开发轻巧的多线程Qt程序更为easy,并能充分利用多处理器机器的优势. ...