jQuery Easy UI ProgressBar（进度条）组件
ProgressBar（进度条）组件，这个还是挺好玩的。我们在自己做点什么的时候常常能用到，比方上传下载文件、导入导出文档啊、加载网页等等。
应用场景非常多，使用起来还非常easy。
演示样例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
//$.fn.progressbar.defaults.value = 30; //想要改动进度条的颜色去css文件里去改动
$('#box').progressbar({
width : 200, //设置进度条宽度 默认400
height : 15, //设置进度条高度 默认22
value : 0, //设置进度条值 默认0
text : '{value}%', //设置进度条百分比模板 默认 {value}% //在value改变的时候触发
onChange : function (newValue, oldValue) {
console.log('新:' + newValue + ',旧:' + oldValue);
},
});
/*
setTimeout(function () {
$('#box').progressbar('setValue', 70);
}, 1000); */
setInterval(function () {
//getValue setValue 各自是返回当前进度值 和 设置一个进度值
$('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5);
}, 1000);
console.log($('#box').progressbar('options'));
//$('#box').progressbar('resize', 80); 没啥大用
});
</script>
</head>
<body style="margin:100px;">
<!--
<div class="easyui-progressbar" data-options="value:60" style="width:400px"></div>
-->
<div id="box" ></div>
</body>
</html>
运行效果：
jQuery Easy UI ProgressBar（进度条）组件的更多相关文章
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- progressbar进度条组件
Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- ProgressBar( 进度条) 组件
一． 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
随机推荐
- Git-如何将已存在的项目提交到git
1.首先在码云或者github上创建一个不带README.md的项目,然后复制远程库的地址(下面以码云为例): 2.进入本地已存在的项目目录:house touch README.md //新建说明 ...
- POJ 2248 搜索
剪枝: 1.从后向前枚举 2.迭代加深 然后就0msAC了 //By SiriusRen #include <cstdio> using namespace std; int n,T,s[ ...
- 001.TypeScript简介.md
TypeScript是一门开源的,由微软开发维护的,发布于2012年10月的静态类型的语言: 他是ECMAScript的超集,支持JavaScript的所有语法和语义,并且在此基础之上提供了更多额外的 ...
- nginx配置aliyun https
server { listen 443; server_name www.goforit.com goforit.com; ssl on; ssl_certificate cert/goforit.p ...
- FZU 1202 信与信封问题 二分图匹配
找匹配中的关键边. 做法: 拆掉一条匹配边,然后对边两边的点做一次增广,如果可以增广,那么此边不是关键边,否则是关键边. 详情可以参见:http://www.docin.com/p-109868135 ...
- 百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...
- 第五讲 自对偶的Yang-Mills方程及Polyakov和t'Hooft解
$\newcommand{\R}{\mathbb{R}}$以下我们考虑的是$\R^4$或者$S^4$上的Yang-Mills泛函,它们是共形不变的. 一.自对偶和反自对偶 我们寻找$\R^4$或$S^ ...
- 移动端开发ios和安卓兼容问题
移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...
- JVM学习心得
出处:http://blog.csdn.net/qq_16143915/article/details/51195438 一.JAVA内存管理与GC机制 Java在JVM所虚拟出的内存环境中执行,ja ...
- easyui combobox 取值
easyui combobox 取值 var zhudaoci = $.trim($('#spanZhudaociId').combobox('getValue')); 学习了:http://blog ...