前言
扩展自$.fn.spinner.defaults和$.fn.numberbox.defaults。使用$.fn.numberspinner.defaults重写默认值对象。下载该插件翻译源码
数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值
源码
/** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 数字微调 */ (function ($) { //创建 function createNumberspinner(jq) { $(jq).addClass("numberspinner-f"); var opts = $.data(jq, "numberspinner").options; $(jq).spinner(opts).numberbox(opts); }; //在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮 function _spin(jq, down) { var options = $.data(jq, "numberspinner").options; var v = parseFloat($(jq).numberbox("getValue") || options.value) || 0; if (down == true) { v -= options.increment; } else { v += options.increment; } $(jq).numberbox("setValue", v); }; //实例化组件 $.fn.numberspinner = function (target, parm) { if (typeof target == "string") { var method = $.fn.numberspinner.methods[target]; if (method) { return method(this, parm); } else { return this.spinner(target, parm); } } target = target || {}; return this.each(function () { var numberspinner = $.data(this, "numberspinner"); if (numberspinner) { $.extend(numberspinner.options, target); } else { $.data(this, "numberspinner", { options: $.extend({}, $.fn.numberspinner.defaults, $.fn.numberspinner.parseOptions(this), target) }); } createNumberspinner(this); }); }; //默认方法 $.fn.numberspinner.methods = { //返回属性对象 options: function (jq) { var options = $.data(jq[0], "numberspinner").options; return $.extend(options, { value: jq.numberbox("getValue"), originalValue: jq.numberbox("options").originalValue }); }, //设置数字微调控件的值 setValue: function (jq, value) { return jq.each(function () { $(this).numberbox("setValue", value); }); }, //获取值 getValue: function (jq) { return jq.numberbox("getValue"); }, //清空组件值 clear: function (jq) { return jq.each(function () { $(this).spinner("clear"); $(this).numberbox("clear"); }); }, //重置组件值 reset: function (jq) { return jq.each(function () { var _e = $(this).numberspinner("options"); $(this).numberspinner("setValue", _e.originalValue); }); } }; //解析器配置 $.fn.numberspinner.parseOptions = function (target) { return $.extend({}, $.fn.spinner.parseOptions(target), $.fn.numberbox.parseOptions(target), {}); }; //默认属性 继承了spinner numberbox的属性和事件 $.fn.numberspinner.defaults = $.extend({}, $.fn.spinner.defaults, $.fn.numberbox.defaults, { //在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮 spin: function (down) { _spin(this, down); } }); })(jQuery);
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic NumberSpinner - 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.validatebox.js"></script> <script src="../../plugins2/jquery.spinner.js"></script> <script src="../../plugins2/jquery.numberbox.js"></script> <script src="../../plugins2/jquery.numberspinner.js"></script> </head> <body> <h2>Basic NumberSpinner</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click spinner button to change value.</div> </div> <div style="margin:10px 0;"></div> <input class="easyui-numberspinner" style="80px;" data-options=" onChange: function(value){ $('#vv').text(value); } "></input> <div style="margin:10px 0;"> Value: <span id="vv"></span> </div> </body> </html>
插件效果
