jQuery插件封装系列（一）—— 金额录入框
基于jQuery原型封装数值录入框，禁止录入、粘贴非数值字符
(function ($) {
// 数值输入框
$.fn.numbox = function (options) {
var type = (typeof options);
if (type == 'object') {
if (options.width) this.width(options.width);
if (options.height) this.height(options.height);
this.bind("input propertychange", function (obj) {
numbox_propertychange(obj.target);
});
this.bind("change", function (obj) {
var onChange = options.onChange;
if (!onChange) return;
var numValue = Number(obj.target.value);
onChange(numValue);
});
this.bind("hide", function (obj) {
var onHide = options.onHide;
if (!onHide) return;
var numValue = Number(obj.target.value);
onHide(numValue);
});
return this;
}
else if (type == 'string') {
// type为字符串类型，代表调用numbox对象中定义的方法
var method = eval(options);
if (method) return method(this, arguments);
}
}
// 属性值变化事件
function numbox_propertychange(numbox) {
if (numbox.value == '-' || numbox.value == numbox.oldvalue) return;
var numvalue = Number(numbox.value);
if (isNaN(numvalue)) {
numbox.value = numbox.oldvalue;
}
else {
numbox.oldvalue = numbox.value;
}
}
// 获取值
function getValue(numbox) {
var value = numbox.val();
return Number(value);
}
// 设置值
function setValue(numbox, params) {
if (params[1] == undefined) return;
var numvalue = Number(params[1]);
if (!isNaN(numvalue)) {
for (var i = 0; i < numbox.length; i++) {
numbox[i].focus();
numbox[i].value = numvalue;
numbox[i].oldvalue = numvalue;
}
}
}
})(jQuery);
调用方法如下
<body>
<input id="test" />
<script>
$("#test").numbox({
width: 150,
height: 20
}); // 调用setValue方法设置值
$("#test").numbox('setValue',100);
</script>
</body>
jQuery插件封装系列（一）—— 金额录入框的更多相关文章
- 我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- jquery插件封装
HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...
- 最简单的原生js和jquery插件封装
最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将 ...
- 【jQuery】jquery插件封装
扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jquery插件封装成seajs模块
jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...
- jquery插件封装思路整理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (jQuery 插件)封装容器的表单为json对象
下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...
- jQuery 插件封装的方法
方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuer ...
随机推荐
- Python 解压序列、可迭代对象并赋值给多个变量
Python数据结构和类型 1.1 解压序列赋值给多个变量 现在有一个包含N个元素的元组或者是序列,怎样将它里面的值解压后同时赋值给N个变量? 解决思路:先通过简单的解压赋值给多个变量,前提是变量的数 ...
- CPP-基础：wchar_t
目 录 1简介 2例如 3将char转换成wchar_t 1.简介 wchar_t是C/C++的字符数据类型,是一种扩展的字符存储方式,wchar_t类型主要用在国际化程序的实现中,但它不等同于uni ...
- C# 使用Epplus导出Excel [3]：合并列连续相同数据
C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...
- sublime text 3143 最新激活方法
1)输入激活码 —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60 ...
- GIMP矩形选框预圆形选框
矩形选框,四种框选模式,了解一下 Repalace the current selector Add to the current selection (shift键) Subtract from t ...
- perl学习之五：列表和数组
列表及其形式 数组 数组的赋值 数组的读取 数组片段 数组函数 二维数组简介 总结 1.列表形式: 1.(item1,item2,...) 2.qw(item1 item2 item3 ...) 3. ...
- 《C/C++工程师综合练习卷》之小试牛刀
第一套练习之感受 刚刚注册了牛客网的账号,准备在此衡量一下水平,好好磨练一番.看到推荐练习<C/C++工程师综合练习卷>,oh,20道题,2个小时.由于木有经验,好一番紧张~ 结果用了20 ...
- POJ：3461-Oulipo（KMP模板题）
原题传送:http://poj.org/problem?id=3461 Oulipo Time Limit: 1000MS Memory Limit: 65536K Description The F ...
- LA 4256 DP Salesmen
d(i, j)表示使前i个数满足要求,而且第i个数值为j的最小改动次数. d(i, j) = min{ d(i-1, k) | k == j | G[j][k] } #include <cstd ...
- 【SaltStack】通过Master给Minion安装MySQL
一.IP信息说明 [Master] IP: 192.168.236.100 [Minion] IP: 192.168.236.101 二.配置SaltStack 关于SaltStack Master和 ...