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 ...
随机推荐
- Hadoop MapReduceV2(Yarn) 框架简介
http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ 对于业界的大数据存储及分布式处理系统来说,Hadoop 是耳熟能详 ...
- Android Toast 总结(五种用法)
Toast大家都很熟,不多说.直接上图上代码. 具体代码如下: main.xml: <?xml version="1.0" encoding="utf-8" ...
- Oracle、DB2、SQLSERVER、Mysql、Access分页SQL语句梳理
最近把平时在项目中常用到的数据库分页sql总结了下.大家可以贴出分页更高效的sql语句.sqlserver分页 第一种分页方法 需用到的参数: pageSize 每页显示多少条数据 pageNumbe ...
- Asp.net基础知识
1.[项目结构] 1.1文件后缀: .cs 源文件(程序代码) .csproj 项目文件(管理文件项) .sln 解决方案文件(管理项目) .config ...
- 给String添加reverse方法
我们知道Array有个reverse方法,String则没有,但可以Array来实现,字符串有个split方法可以轻易的将String转换为Array. String.prototype.revers ...
- MVC——分页控件
不管是什么类型的网站,分页都是必不可少的功能实现.在这里记录一下我自己接触过的分页控件: 一. MvcPager控件(记得项目里添加MvcPager.dll的引用) 这里面比较常用的就 ——@Html ...
- MySQL 数据库增量数据恢复案例
MySQL 数据库增量数据恢复案例 一.场景概述 MySQL数据库每日零点自动全备 某天上午10点,小明莫名其妙地drop了一个数据库 我们需要通过全备的数据文件,以及增量的binlog文件进行数据恢 ...
- jQuery Mobile里xxx怎么用呀?(缓存篇)
jQuery Mobile初始页面DOM Cache所引发的问题 HTML元素事件多次触发: jsFiddle: http://jsfiddle.net/gn9JA/2/ cause: 在jsFidd ...
- 配置 Struts2 Hello World
http://javaweb.group.iteye.com/group/wiki/1505-struts2-under-helloworld---how-to-make-the-first-of-t ...
- PHP开发圣经读书笔记01
从今天开始,以“圣经”这本书为教材,系统的温习一下php,之前都是看视频学的. 1.访问表单变量--php变量名称必须与表单域的名称一致 例:$_POST['uname']; //表示把表单域中na ...