progressbar进度条组件
Progressbar 进度条组件
通过$.fn.progressbar.fn.defaults重写默认的defaults
进度条(progressbar)提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。
不依赖其他组件
用法:
1、创建进度条Progressbar
1)进度条(Progressbar)组件可以从html标记创建或者编程创建。从标记创建更容易点,把‘easyui-progressbar’ class加到<div>标记
<div id = "p" class="easyui-progressbar" data-options="value:60" style="width:400px;" ></div>
2)使用javascript创建progressbar
<div id="p" style="width:400px;"></div>
$("#p").progressbar({
value : 60
});
获取或设置值
我们获取当前值并且给这个组件设置一个新值。
var value = $('#p').progressbar('getValue');
if(value < 100){
value += Math.floor(Math.random()*10);
$("#p").progressbar('setValue' , value);
}
2、属性
width string 设置进度条progressbar的宽度 auto
height number 组件的高度。该属性自版本1.3.2起可用 22
value number 百分比值 0
text string 显示在组件上的文本模板 {value}%
3、事件
onChange newValue,oldValue 当值改变时触发
4、方法
options none 返回选项(options)对象
resize width 调整组件尺寸
例子:
$("#p").progressbar('resize');//调整进度条为初始宽度
$("#p").progressbar('resize' , 350);//调整进度条为一个新的宽度
getValue none 返回当前的进度值
setValue value 设置一个新的进度值
<html>
<title>index</title>
<head>
<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>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<div style="width:400px;height:400px; margin-left:400px; margin-top:100px;">
<!--
<div class="easyui-progressbar" data-options="value:30" style="width:600px;"></div>
-->
<div id="box"></div>
</div> </body>
</html> $(function(){ $.fn.progressbar.defaults.value = 40;
$("#box").progressbar({
width : 600,
height : 30,
//value : 20,
text : '${value}%', // 默认是{value}%
onChange : function(newValue , oldValue){
console.log("new:" + newValue + " , old:" + oldValue);
}
}); /*
setTimeout(function(){
$("#box").progressbar('setValue' , 70);
},1000);
*/ /*
setInterval(function(){
$("#box").progressbar('setValue' , $("#box").progressbar('getValue') + 5);
},200);
*/ //console.log($("#box").progressbar('options'));
//$("#box").progressbar('resize' , 800);
//$("#box").progressbar('resize'); //这个没看出什么效果 });
progressbar进度条组件的更多相关文章
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- ProgressBar( 进度条) 组件
一. 加载方式 //class 加载方式<div class="easyui-progressbar"data-options="value:60" st ...
- Android学习笔记(24):进度条组件ProgressBar及其子类
ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...
- 详解Bootstrap进度条组件
在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- EasyUI系列学习(八)-ProgressBar(进度条)
一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- Android学习笔记- ProgressBar(进度条)
本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...
- 【Android 应用开发】 自定义 圆形进度条 组件
转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...
随机推荐
- eclipse调试程序界面简单介绍使用
右键程序 Debug 运行后 如下图:
- Rsync结合Inotify 实时同步配置(更新之前繁琐的传输认证)
今天一位CU的友友根据之前介绍过 通过rsync+inotify-tools+ssh实现触发式远程实时同步 配置分发系统,但是由于认证繁琐,很容易出错,我今天重新整理了下,用rsync密码文件pas ...
- OpenStack之Glance模块
一.Glance服务 1.Glance架构 Glance架构是一个典型的CS架构,提供的也是标准的Rest接口,各个layer分层也是很清楚的. 2.Glance服务 Glance是OpenStack ...
- python计算纪念日相关
注意需要python3 1.距离某一特定日期多少天后,如 100天 from datetime import datetime,timedelta pre=datetime(2016,12,12,22 ...
- 20145329《Java程序设计》第四周学习总结
教材学习内容总结 封装.继承.多态 封装:封装类私有数据,让用户无法直接存取. 继承: 定义:避免多个类间重复定义共同行为,就是相同的代码提升为父类,java中只能继承一个父类.用继承的方式编写代码可 ...
- android ramdisk
android ramdisk 1.android文件系统的结构android源码编译后得到system.img,ramdisk.img,userdata.img映像文件.其中, ramdisk.im ...
- springboot访问jsp页面
1.新建springboot项目,选择以war包的方式package; image 2.勾选Web模块,DevTools可不选(用作热部署,不影响运行) image 3.创建完成后,项目结构如 ...
- 简单的dos命令
cd .. 进入上一层目录cd /.. 进入当前盘所有根目录d: 进入d盘dir 查看下一级目录d:>d:\abc.txt 新建一个文档hostname 主机名SET 查看环境变 ...
- Maven取消编译自动测试
Maven取消编译自动测试 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...
- dp之最长上升子序列
普通做法是O(n^2)下面介绍:最长上升子序列O(nlogn)算法(http://blog.csdn.net/shuangde800/article/details/7474903) /* HDU 1 ...