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 ...
随机推荐
- JAXB - XML Schema Types, Defining Types for XML Elements With Content
Content: A Value The content of an XML element may be some value, or one or more subordinate element ...
- Java多线程并发
http://wangjianwei866.blog.163.com/blog/static/9295823201231665319314/ 基于以上网文,调整了一下格式,修改了一些标点和拼写错误. ...
- Extjs3笔记 fbar
在项目中会遇到在grid右下角显示合计之类的显示. 之前使用过的方式: 1.用width强制顶过去. 2.利用css来控制. 弊端: 利用第一种方式:导致调整窗口大小时会导致合计不能根据窗体的大小变化 ...
- C#3.0 LINQ 操作符
Table 类: public class DemoDataContext : DataContext { public DemoDataContext (string cxString) : bas ...
- SQLServer数据操作(建库、建表以及数据的增删查改)
SQLSever数据操作 一.建立数据库: create database DB ---数据库名称 ( name=data1 --文件名, ...
- Oracle学习第一天---安装和基础入门
国庆七天假,决定静下心来入门Oracle数据库. 环境:Ocacle 11g 软件安装包和安装图解,大家可以在我的百度网盘上下载:链接:http://pan.baidu.com/s/1ntjDEnZ ...
- Sytem 表空间很大
SYSTEM表空间使用率达到了99%, 经查出,是审计表AUD$占用绝大部分的空间. -- 占用表空间system对象大小排名 SELECT * MB FROM DBA_SEGMENTS WHERE ...
- transform3D实现翻页效果
---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连 ...
- OC3_字典
// // main.m // OC3_字典 // // Created by zhangxueming on 15/6/12. // Copyright (c) 2015年 zhangxueming ...
- Java实战之02Hibernate-02映射、一级缓存、实体对象状态
五.映射基础 1.实体类采用javabean的编写规范 JavaBean编写规范: a.类一般是public的 b.有默认的构造方法 c.字段都是私有的 d.提供公有的getter和setter方法 ...