前言
使用$.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 = { "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="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>
插件效果
