第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
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(进度条)组件的更多相关文章
- progressbar进度条组件
Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...
- EasyUI Progressbar 进度条
通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...
- ProgressBar( 进度条) 组件
一. 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...
- EasyUI - Progressbar 进度条控件
效果: html代码: <div id="p" style="width:400px;"></div> JS代码: $(function ...
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
jQuery EasyUI,Panel(面板)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
- 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件
jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...
- 第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置
第三百九十八节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5系统环境设置 1.Linux安装配置 注意事项: 虚拟机网卡桥接模式 不要拨VPN 如果,网络怎么都 ...
随机推荐
- Delphi 设置时间格式
// 设置WINDOWS系统的短日期的格式SetLocaleInfo(LOCALE_SYSTEM_DEFAULT, LOCALE_SSHORTDATE, 'yyyy-MM-dd'); Applicat ...
- Linux-C网络编程之epoll函数
上文中说到假设从100的不同的地方取外卖,那么epoll相当于一部手机,当外卖到达后,送货员能够通知你.从而达到每去必得,少走非常多路. 它是怎样实现这些作用的呢? epoll的功能 epoll是se ...
- cs-SelectTree-DropTreeNode, SelectTreeList
ylbtech-Unitity: cs-SelectTree-DropTreeNode, SelectTreeList DropTreeNode.cs SelectTreeList.cs 1.A,效果 ...
- 后台SQL注入实例
简要描述: 汉庭连锁酒店后台SQL注入,可绕过登陆限制进入后台,可脱库. 详细说明: 问题发生在这个站点.http://miaosha.htinns.com/ 标题内没有写具体信息.因为怕发布后被人入 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何快速调整大量控件的位置
打开元素列表,然后直接从顶部按住Shift批量选中控件即可 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的 ...
- Digg工程师讲述Digg背后的技术
虽然最近业绩有所下滑,也出现了一些技术故障,但Digg作为首屈一指的社会化新闻网站,其背后的技术还是值得一探,Digg工程师 Dave Beckett 在今年4月份写一篇名为<How Digg ...
- Ios 调用Appstore 下载界面 [[UIApplication sharedApplication] openURL
http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?mt=8&id=286274367 id = itunesconn ...
- python——数据结构之单链表的实现
链表的定义: 链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址.由于每个结点都包含了可以链接起来的地址 信息,所以用一个变量 ...
- OpenERP为form和tree视图同时指定view_id的方法
Odoo,OpenERP中文网 / 2014-07-16 文所说的是关于OpenERP中同一个对象(同名继承)使用view_id来指定form和tree视图的方法,由于官方文档中Views and E ...
- Qt学习 之 多线程程序设计
QT通过三种形式提供了对线程的支持.它们各自是, 一.平台无关的线程类 二.线程安全的事件投递 三.跨线程的信号-槽连接. 这使得开发轻巧的多线程Qt程序更为easy,并能充分利用多处理器机器的优势. ...