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（进度条）组件的更多相关文章

  1. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  2. progressbar进度条组件

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

  3. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  4. ProgressBar( 进度条) 组件

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

  5. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  6. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  7. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  9. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

随机推荐

  1. Linux基础04

    ** Linux基本操作常用命令(四) ** Linux系统管理命令 1.top:查看系统资源,每隔三秒刷新一次,按q:退出浏览状态 2.free:查看内存信息,-m,以MB单位显示 3.netsta ...

  2. <Sicily> 生成字符串

    一.题目描述 假设一个字符串只由字符'0','1','?'组成,其中字符'?'表示该字符可由字符'0'或'1'替代. 现有一些字符串,根据这些字符串生成所有可生成的字符串. 如:{10,?1,0? } ...

  3. Class.forName()用法详解 【转】

    来源  http://blog.csdn.net/kaiwii/article/details/7405761 主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.f ...

  4. ifreq、ifconf

    网络相关的ioctl请求的request参数及arg地址必须指向的数据类型如下表所示: 接口 SIOCGIFCONF SIOCSIFADDR SIOCGIFADDR SIOCSIFBRDADDR SI ...

  5. Opencv YAML和XML格式文件操作详解

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/47660943 本文参考Opencv 2 ...

  6. Android ImageView设置图片原理（下）

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...

  7. springMVC --全局异常处理（两种方式）

    首先看springMVC的配置文件: <!-- 全局异常配置 start --> <bean id="exceptionResolver" class=" ...

  8. Light oj 1138 - Trailing Zeroes (III) 【二分查找好题】【 给出N！末尾有连续的Q个0，让你求最小的N】

    1138 - Trailing Zeroes (III) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  9. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  10. jfinal 后台文件上传(结合上一篇(h5 图片回显))

    前端用了jquery.form.js插件异步提交表单 $("#imgForm").ajaxSubmit();//户主头像 /** * * @description 上传户主头像 * ...