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 ...
随机推荐
- openlayers wfs获取要素
var wfsProtocol = new OpenLayers.Protocol.WFS.v1_1_0({ url: mapServerUrl + "/wfs", feature ...
- 为 Date 对象添加 ago 属性
/* * 此处,__defineGetter__与__defineSetter__相当于C#实体中类中的get与set **/ Date.prototype.__defineGetter__('ago ...
- Git的安装以及注册账号等操作
1.安装Git-2.5.1-64-bit.exe 一直下一步直至完成 2.注册github账号 官网地址:https://github.com/github 3.找到一个按钮“New Reposit ...
- MySql事务及JDBC对事务的使用
一 .事务的几个重要特性 1. 原子性 事务内的每个内容不可分割,是一个统一的整体.或同时进行或同时消亡. 2.一致性 事务执行前和事务执行后,状态都是统一的.如A转B 100元,A和B数据总额度没有 ...
- 373. Find K Pairs with Smallest Sums
You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. 给你两个数组n ...
- const char*、char*、char* const、char[]、string的区别
1.const char* p: p is a pointer to const char(char const* p 一样) 意思就是不能通过p指针来修改p指向的内容(但是内容可以修改). 2. ...
- 【nodemailer】 初试
nodemailer 是什么? 简单的讲nodemailer就是用来发送邮件的.最近的一个项目需要向客户的注册邮箱发送验证连接,研究了一下. 刚开始我以为nodemailer还可以用来接收邮件,看了好 ...
- 【DB】SQLiteHelper
/// <summary> /// 说明:这是一个针对System.Data.SQLite的数据库常规操作封装的通用类. /// </summary> public class ...
- Pjax介绍及在asp.net MVC3中使用pjax的简单示例
相信很多人对ajax并不陌生,对ajax的一些优点也了如指掌,如:局部刷新改善用户体验,减少开销,让服务器和浏览器之间的响应更快等. 但是它的缺点也是很显而易见的: AJAX大量的使用了javascr ...
- android apk 反编译
Apk文件结构 apk文件实际是一个zip压缩包,可以通过解压缩工具解开.以下是我们用zip解开helloworld.apk文件后看到的内容.可以看到其结构跟新建立的工程结构有些类似. java代码: ...