jQuery Easy UI ProgressBar（进度条）组件
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（进度条）组件的更多相关文章
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- progressbar进度条组件
Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- ProgressBar( 进度条) 组件
一． 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
随机推荐
- springboot shiro配置
导入相关包(这里配合使用Ehcache缓存) <dependency> <groupId>org.apache.shiro</groupId> <artifa ...
- Random words
To choose a random word from the histogram, the simplest algorithm is to build a list with multiple ...
- if语句练习
输入年月日,首先判断该年是平年闰年并且计算该天是该年的第几天: 判断男女体重是否标准: 体重判断里边出现一个问题:如果性别输入的不是男也不是女,那么会执行输出“请输入正确的性别”:然后底下会继续输出“ ...
- js字符串首字母转为大写
function initialsLetterUpperCase(arr){ if(Array.isArray(arr)){ return arr.map(function(val,index,arr ...
- BZOJ 3787 Gty的文艺妹子序列(分块+树状数组+前缀和）
题意 给出n个数,要求支持单点修改和区间逆序对,强制在线. n,m<=50000 题解 和不带修改差不多,预处理出smaller[i][j]代表前i块小于j的数的数量,但不能用f[i][j]代表 ...
- Laravel修炼：服务提供者
前言 上一篇博客文章收集了关于Laravel服务容器的相关知识(传送门),我们知道了服务容器主要有绑定和解析两个重要功能,那么Laravel这个框架集齐了如此多功能,我们项目可能还需要另外引入一些 ...
- vue使用，问题
参考链接:https://cn.vuejs.org/v2/guide/index.html *)[Vue warn]: Error in v-on handler: "TypeError: ...
- 紫书 习题 10-12 UVa 557（概率计算）
开始的时候我没有考虑1/2的概率,直接一波组合数,然后WA 后来去看题解发现我们可以反过来想,求最后两个人不一样的情况 这个时候肯定会抛到最后的 所以每一种可能就是(0.5)^(n - 2),然后一共 ...
- gcc/g++命令参数笔记
1. gcc -E source_file.c -E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. ...
- springboot框架笔记——springboot提供的自动配置
Springboot基本配置 spring MVC的定制配置需要我们的配置实现一个WebMvcConfigurer接口,如果实在spring环境下需要使用@EnableWebMVC注解,来开启对spr ...