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 ...
随机推荐
- N_F1_APPROVE
package nc.bs.pub.action; import java.util.ArrayList; import java.util.Hashtable; import java.util.L ...
- xxx is not in the sudoers file.This incident will be reported.的解决方法
1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件vi /etc/sud ...
- 谈谈asp.net中的<% %>,<%= %>,<%# %><%$ %>的使用
学而不思则罔,思而不学则殆,每天坚持一小步,则成功一大步 asp.net中的<% %>,<%= %>,<%#eval("") %><%$ ...
- C#集合之Hashtable
Hashtable是一个键值对集合,其泛型版本是Dictionary<K, V>,下面说下常用的一些方法; 1.Add(),向Hashtable添加元素,需要注意的是因为它是键值对集合,所 ...
- 解决VS报表.rdl 显示乱码“小方块”问题
报表在编辑状态显示文本显示小方块 如图 原因:字体格式是英文状态下. 解决:选中文本框,选择文本框属性,选择字体,字体改成宋体或微软雅黑.就可以了.
- oninput和onpropertychange
时常会有监听输入框输入的场景,比如新浪微博的发微博输入框: 还有边输入边提示: 以及form表单边输入边验证,当内容为空提示或者改变输入框的样式达到提示效果. 在IE中是onpropertychang ...
- 封装DB类
封装DB类 一般一个类单独书写在一个Php文件中,为了见名知意,会对文件名有一个规范:类名.class.php 第1步: 创建DB类 第2 步: 属性设计 第3步: 初 ...
- 记个maven无法识别JAVA_HOME的问题 Error: JAVA_HOME is not defined correctly.
Error: JAVA_HOME is not defined correctly. We cannot execute /Library/Java/JavaVirtualMachines/jdk1. ...
- 【制作镜像Win*】系统配置
向livibirt.xml插入Line 6-13所示代码,即加入两个virtio-serial设备: <!--vnc方式登录,端口号自动分配,自动加1,可以通过virsh vncdisplay来 ...
- OpenJudge/Poj 1753 Flip Game
1.链接地址: http://bailian.openjudge.cn/practice/1753/ http://poj.org/problem?id=1753 2.题目: 总时间限制: 1000m ...