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. MVC自定义错误日志异常处理

    MVC添加错误日志处理模块很简单,只要写个继承自HandleErrorAttribute的过滤器,重新OnException方法,贴个异常处理代码如下: public class ExceptionA ...

  2. PostgreSQL Replication之第四章 设置异步复制（8）

    4.8 处理时间线 时间线是一个您必须要知道的一个重要的概念,尤其是当您规划一个大型的设置的时候. 那么,什么是时间线呢?事实上,它是XLOG的一个分支.正常情况下,刚设置的一个数据库实例使用的时间线 ...

  3. codeforces 400 C Inna and Huge Candy Matrix【模拟】

    题意:给出一个矩形的三种操作,顺时针旋转,逆时针旋转,对称,给出原始坐标,再给出操作数,问最后得到的坐标 画一下模拟一下操作就可以找到规律了 #include<iostream> #inc ...

  4. B-Boxes

    http://agc010.contest.atcoder.jp/tasks/agc010_b Problem Statement There are N boxes arranged in a ci ...

  5. 链表python

    无序链表.有序链表 有序列表排序通常是升序或降序,并且我们假设列表项具有已经定义的有意义的比较运算. 许多有序列表操作与无序列表的操作相同. 必须明确链表的第一项位置,一旦知道第一项. 链表实现的基本 ...

  6. PHP DES-ECB加密对接Java解密

    最近公司有个业务,需要对接第三方接口,但是参数是需要加密的,对方也只提供了一个java的demo,在网上到处搜索,没有找到直接就能用的方法,后来还是跟公司的Android工程师对接出来的,在这里记录一 ...

  7. ECNUOJ 2856 仰望星空

    仰望星空 Time Limit:1000MS Memory Limit:65536KBTotal Submit:373 Accepted:145 Description  我仰望星空, 它是那样辽阔而 ...

  8. 仿分词统计的MapReduce 程序。

    HDFS 数据格式 :  举例单条数据:02-26 08:01:56 [qtp512249001-42] INFO  async-statistics - class com.spring.aop.S ...

  9. hadoop 2.5.1 、Hadoop 2.7 Hadoop 2.6

    1  rpm 安装     yum install rpm 2  JDK安装    << 一定要先删除JDK!!!!!!>>       rpm -qa | grep java ...

  10. [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

    Rather than using Components to push streams into other Components, mapPropsStream allows you to cre ...