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. ES聚合底层机制-bucket深的话采用广度优先更好，而如果是年度统计还是深度优先好

    见原文,仅仅摘录部分:https://www.elastic.co/guide/cn/elasticsearch/guide/current/_preventing_combinatorial_exp ...

  2. rest_framework 解析器（下 全局配置使用）

    解析器 一般都是全局设置 参考文档 www.cnblogs.com/wupeiqi/articles/.html REST_FRAMEWORK=( "DEFAULT_PARSER_CLASS ...

  3. Lists and tuples

    zip is a built-in function that takes two or more sequence and ‘zips’ them into a list of tuples, wh ...

  4. PostgreSQL Replication之第九章 与pgpool一起工作（3）

    9.3 理解pgpool的架构 一旦我们安装了pgpool,是时候来讨论软件架构了.从一个用户的角度看,pgpool就像一个 正常的数据库服务器,您可以想连接任何其他服务器一样连接到它: pgpool ...

  5. Spring：dispatchservlet

    DispatcherServlet 是 Spring MVC 中负责请求调度的核心引擎,所有的请求将由此 Servlet 根据配置分发至各个逻辑处理单元.其内部同时也维护了一个ApplicationC ...

  6. 二、Fast-R-CNN

    一.概括 Fast R-cnn的主要亮点有:Fast R-CNN将借助多任务损失函数,将物体识别和位置修正合成到一个网络中,不再对网络进行分步训练,不需要大量内存来存储训练过程中特征的数据:用RoI层 ...

  7. es6 学习2 模板字符

    es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点. 1.第一个用途,基本的字符串格式化.将表达式嵌入字符串中进行拼接.用${}来界定 //es5 var name = 'lux' ...

  8. zookeeper 性能测试

    zookeeper压力测试:性能对比(3个节点,5个节点,7个节点 创建节点.删除节点.设置节点数据.读取节点数据性能及并发性能) 测试结果如下: 五次测试三节点结果: 创建100W节点用时:15.0 ...

  9. 异步Ajax

    Ajax异步刷新应用在Web开发中经常用到,在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现: 在MVC中,虽然依然可以使用一般处理程序,但是一般还是通过在Contro ...

  10. 洛谷P1919 【模板】A*B Problem升级版（FFT快速傅里叶）

    题目描述 给出两个n位10进制整数x和y,你需要计算x*y. 输入输出格式 输入格式: 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位数为n的正整数y. 输出格式: 输出一 ...