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. 4. idea常用快捷键设置（改为eclipse相似）

    转自:https://blog.csdn.net/loveer0/article/details/82697877 idea常用快捷键设置(改为eclipse相似) 目录 idea常用快捷键设置改为e ...

  2. Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞

    不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统  IP:  192.168.1.103 2.受害者机子(windows XP系统)   IP: 10.10 ...

  3. SparkSQL基础

    * SparkSQL基础 起源: 1.在三四年前,Hive可以说是SQL on Hadoop的唯一选择,负责将SQL编译成可扩展的MapReduce作业.鉴于Hive的性能以及与Spark的兼容,Sh ...

  4. Oozie框架基础

    * Oozie框架基础 官方文档地址:http://oozie.apache.org/docs/4.0.0/DG_QuickStart.html 除Oozie之外,类似的框架还有: ** Zeus:h ...

  5. SVN在vs2013中使用

    http://download.csdn.net/download/show_594/9112963 内包含VisualSVN 5.0.1的官方原版安装包及破解文件VisualSVN.Core.L.d ...

  6. PostgreSQL备份与还原

    物理备份:整个数据库的数据目录及文件做备份:备份整个数据库的文件系统. 物理恢复:恢复整个数据库的文静系统. 物理备份方法: 开启归档 select pg_start_backup('backup—— ...

  7. SSD-tensorflow-1 demo

    一.简易识别 用最简单的已训练好的模型对20类目标做检测. 你电脑的tensorflow + CUDA + CUDNN环境都是OK的, 同时python需要安装cv2库 {      'aeropla ...

  8. NodeJS学习笔记 进阶 (1)Nodejs进阶：服务端字符编解码&乱码处理(ok)

    个人总结:这篇文章主要讲解了Nodejs处理服务器乱码及编码的知识,读完这篇文章需要10分钟. 摘选自网络 写在前面 在web服务端开发中,字符的编解码几乎每天都要打交道.编解码一旦处理不当,就会出现 ...

  9. NodeJS学习笔记 (27)实用工具模块-util(ok)

    debuglog(section) 很有用的调试方法.可以通过 util.debuglog(name) 来创建一个调试fn,这个fn的特点是,只有在运行程序时候,声明环境变量NODE_DEBUG=na ...

  10. 洛谷2863 [Usaco06JAN]牛的舞会

    题目描述 约翰的N (2 <= N <= 10,000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别 上鲜花,她们要表演圆舞. 只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一 ...