easyui源码翻译1.32---ProgressBar（进度条）
前言
使用$.fn.progressbar.defaults重写默认值对象。下载该插件翻译源码
进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译：qq 1364386878 进度条
*/
(function ($) {
//初始化
function init(target) {
$(target).addClass("progressbar");
$(target).html("<div class=\"progressbar-text\"></div><div class=\"progressbar-value\"><div class=\"progressbar-text\"></div></div>");
return $(target);
};
//调整大小
function _resize(jq, width) {
var options = $.data(jq, "progressbar").options;
var bar = $.data(jq, "progressbar").bar;
if (width) {
options.width = width;
}
bar._outerWidth(options.width)._outerHeight(options.height);
bar.find("div.progressbar-text").width(bar.width());
bar.find("div.progressbar-text,div.progressbar-value").css({ height: bar.height() + "px", lineHeight: bar.height() + "px" });
};
//实例化进度条组件
$.fn.progressbar = function (target, parm) {
if (typeof target == "string") {
var method = $.fn.progressbar.methods[target];
if (method) {
return method(this, parm);
}
}
target = target || {};
return this.each(function () {
var progressbar = $.data(this, "progressbar");
if (progressbar) {
$.extend(progressbar.options, target);
} else {
progressbar = $.data(this, "progressbar",
{
options: $.extend({}, $.fn.progressbar.defaults,
$.fn.progressbar.parseOptions(this), target),
bar: init(this)
});
}
$(this).progressbar("setValue", progressbar.options.value);
_resize(this);
});
};
//默认方法
$.fn.progressbar.methods = {
//返回属性对象
options: function (jq) {
return $.data(jq[0], "progressbar").options;
},
//组件大小。
resize: function (jq, width) {
return jq.each(function () {
_resize(this, width);
});
},
//返回当前进度值
getValue: function (jq) {
return $.data(jq[0], "progressbar").options.value;
},
//设置一个新的进度值
setValue: function (jq, value) {
if (value < 0) {
value = 0;
}
if (value > 100) {
value = 100;
}
return jq.each(function () {
var options = $.data(this, "progressbar").options;
var text = options.text.replace(/{value}/, value);
var oldVal = options.value;
options.value = value;
$(this).find("div.progressbar-value").width(value + "%");
$(this).find("div.progressbar-text").html(text);
if (oldVal != value) {
options.onChange.call(this, value, oldVal);
}
});
}
};
//解析器
$.fn.progressbar.parseOptions = function (target) {
return $.extend({}, $.parser.parseOptions(target,
["width", "height", "text", { value: "number" }]));
};
//默认属性和事件
$.fn.progressbar.defaults = {
width: "auto",//设置进度条宽度
height: 22,//设置进度条gao度
value: 0,//百分比值
text: "{value}%",//要在组件上显示的文本模板
onChange: function (newValue, oldValue) {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ProgressBar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.progressbar.js"></script>
</head>
<body>
<h2>Basic ProgressBar</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the button below to show progress information.</div>
</div>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="start()">Start</a>
</div>
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
<script>
function start(){
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
}
};
</script>
</body>
</html>
插件效果
easyui源码翻译1.32---ProgressBar（进度条）的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--Slider（滑动条）
前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--Messager（消息窗口）
前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...
- easyui源码翻译1.32--EasyLoader（简单加载）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--Draggable（拖动）
前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...
- easyui源码翻译1.32--Droppable（放置）
前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...
- easyui源码翻译1.32--Resizable（调整大小）
前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...
- easyui源码翻译1.32--Pagination（分页）
前言 使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码 该分页控件允许用户导航页面的数据.它支持页面导航和页面长度选择的选项设置.用户可以在分页控件上添加自定义按钮 ...
随机推荐
- SQL-学习使用FOR XML PATH
前言:本人SQL技术很烂,然后工作时间也不久,许多东西都还在学习中,说的不好的地方尽请谅解. 首先跟大家说一下我今天遇到的问题吧. 查出的数据有三列,第一列存放的是32位的GUID,Res_Name存 ...
- Android 四大组件之Acticity
什么是Activity? Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastRe ...
- linux字符设备驱动学习笔记（一）：简单的字符设备驱动
最近在鼓捣lnux字符设备驱动,在网上搜集的各种关于linux设备驱动的代码和注释,要么是针对2.4的,要么是错误百出,根本就不能运行成功,真希望大家在发博客的时候能认真核对下代码的正确性,特别是要把 ...
- Ext.Net学习笔记22：Ext.Net Tree 用法详解
Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...
- DataBase 总结开篇
系列说明 本系列将总结(SQL)数据库技术在日常开发中引用,读者群体假设为三类:没接触过SQL的入门程序员.有过一两年经验的程序员.三年以上接触过性能调优的程序员.按照这个分类本系列大体分为三篇 第一 ...
- 懒人记录 Hadoop2.7.1 集群搭建过程
懒人记录 Hadoop2.7.1 集群搭建过程 2016-07-02 13:15:45 总结 除了配置hosts ,和免密码互连之外,先在一台机器上装好所有东西 配置好之后,拷贝虚拟机,配置hosts ...
- 模板：LCS（最长公共子序列）
#include <cstring> #define max(a,b) ((a) > (b) ? (a) : (b)) int same(char ch1,char ch2) { ; ...
- dd命令测试linux磁盘读写速度
1.先熟悉两个特殊的设备: (1)/dev/null:回收站.无底洞. (2)/dev/zero:产生字符. 2.测试磁盘写能力 time dd if=/dev/zero of=/t ...
- web页面背景色控制
有一道题要实现输入rgb数值,实现更换页面背景色的功能,如下图所示: 答案: <html> <head> <script type="text/javascri ...
- Sublime Text 3使用技巧总结--快捷键及常用插件
1.Goto Anything(快速搜索) |--Ctrl+p 输入|--①文件名 |--②@+函数名 |--③:+数字 ->跳转到相应行 |--④#+变量名 2.多行游标 |--|--Alt+ ...