easyui源码翻译1.32--NumberSpinner（数字微调）
前言
扩展自$.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="width:80px;" data-options="
onChange: function(value){
$('#vv').text(value);
}
"></input>
<div style="margin:10px 0;">
Value: <span id="vv"></span>
</div>
</body>
</html>
插件效果
easyui源码翻译1.32--NumberSpinner（数字微调）的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--TimeSpinner（时间微调）
前言 扩展自$.fn.spinner.defaults.使用$.fn.timespinner.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--EasyLoader（简单加载）
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--Form（表单）
前言 使用$.fn.form.defaults重写默认值对象下载该插件翻译源码 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用va ...
- easyui源码翻译1.32--NumberBox（数值输入框）
前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...
- 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 ...
随机推荐
- Linux VIM python 自动补全插件：pydiction
Pydiction 可以是我们使用Tab键自动补全Python代码在Vim,是一款非常不错的插件. Pydiction不需要安装,所有没有任何依赖包问题,Pydiction主要包含三个文件. pyth ...
- SQL 拼接多个字段的值&一个字段多条记录的拼接 [轉]
例如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...
- 在jsp中获取服务器端的时间
以前只知道在js中这样写:var date = new Date() : 但是这得到的是客户浏览器的时间,并不是服务器的时间. 当然可以通过在Java文件中添加属性,再在js中通过document.g ...
- ### 学习《C++ Primer》- 6
Part 6: 拷贝控制(第13章) // @author: gr // @date: 2015-01-08 // @email: forgerui@gmail.com 一.拷贝.赋值与销毁 拷贝构造 ...
- ### 学习《C++ Primer》- 8
Part 8: 面向对象(第15章) // @author: gr // @date: 2015-01-09 // @email: forgerui@gmail.com 一.OOP 面向对象程序设计的 ...
- [记录 ]升级IOS 9 和 XCode 7 引起的问题
问题一: 升级xcode 7最低的系统配置要求 升级了ios9 后使用 xcode 6.1 已经不能用了,必须升级 xcode 7才行,原先的系统是OSX 10.10.1 版本.而xcode 7.0 ...
- JavaScript学习笔记(8)——JavaScript语法之运算符
一. 算术运算符: 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 ...
- SVG实现描边动画
说起SVG,我是恨它又爱它,恨它是因为刚开始接触的时候自己傻B地想用代码去写它,其实在web上我们用它做交互也只是用了几个常用的特性而已,其他的标签知道这么一回事就成了,其实说白了它就是一种图片格式, ...
- Java security MD5加密算法
利用java.security对字符串进行MD5加密: import java.security.MessageDigest; import java.security.NoSuchAlgorithm ...
- gdb提示Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6_5.2.x86_64
用gdb debugc代码的时候弹出这个错误 Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6_5.2. ...