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. 查看spark是否有僵尸进程，有的话，先杀掉。可以使用下面命令

    查看spark是否有僵尸进程,有的话,先杀掉.可以使用下面命令yarn application -listyarn application -kill <jobid>

  2. 41.AngularJS 服务(Service)

    转自:https://www.cnblogs.com/best/tag/Angular/ 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. A ...

  3. Android EditText+ListPopupWindow实现可编辑的下拉列表

    使用场景 AutoCompleteEditText只有开始输入并且与输入的字符有匹配的时候才弹出下拉列表.Spinner的缺点是不可以编辑.所以本文介绍如何使用EditText+ListPopupWi ...

  4. 使用greenDAO遇到的问题

    前一阵花时间学习了一下greenDAO的使用,这两天已经把项目中之前使用的sqlite数据库操作改用greenDAO,但是在改动的过程中还是出了一些问题,问题主要集中在主键上,下面整理了一下在改动过程 ...

  5. html局部页面打印

    1.局部打印函数. function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页 ...

  6. JTable表格案例

    package com.szht.gpy.frame; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ...

  7. iOS开发——国际化支持Localizable.strings

    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...

  8. [USACO07MAR]每月的费用Monthly Expense

    题目:POJ3273.洛谷P2884. 题目大意:有n个数,要分成m份,每份的和要尽可能小,求这个情况下和最大的一份的和. 解题思路:二分答案,对每个答案进行贪心判断,如果最后得出份数>m,则说 ...

  9. vSphere VCSA5.5加入AD域环境问题记录

    vSphere VCSA5.5加入AD域环境问题记录 实验目的: 搭建一套vSphere VCSA5.5,并加入新搭建的AD域,并使用一个域用户登录VC,赋予对VC的只读权限. 实验环境: 使用VMW ...

  10. [APIO2010]巡逻（树的直径）

    [APIO2010]巡逻 题目描述 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到 ...