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基础一 day13 复习
# 函数 —— 2天 # 函数的定义和调用 # def 函数名(形参): #函数体 #return 返回值 #调用 函数名(实参) # 站在形参的角度上 : 位置参数,*args,默认参数(陷阱),* ...
- WebStorm 编辑器 关闭自动保存功能及添加*星星标记
WebStorm 关闭自动保存功能添加*星星标记为什么要关闭自动保存? 在前端项目工作当中,往往会采用自动化环境(Gulp.webpack等)当文本发生变化的时候就会自动编译代码.在we ...
- SSH整合JAR包详解
如果要使用连接池,添加JAR : c3p0-0.9.1.2.jar
- 理解GloVe模型（Global vectors for word representation）
理解GloVe模型 概述 模型目标:进行词的向量化表示,使得向量之间尽可能多地蕴含语义和语法的信息.输入:语料库输出:词向量方法概述:首先基于语料库构建词的共现矩阵,然后基于共现矩阵和GloVe模型学 ...
- javase(10)_多线程基础
一.排队等待 1.下面的这个简单的 Java 程序完成四项不相关的任务.这样的程序有单个控制线程,控制在这四个任务之间线性地移动.此外,因为所需的资源 ― 打印机.磁盘.数据库和显示屏 -- 由于硬件 ...
- js获取主机名实现页面跳转
<script language="javascript" type="text/javascript"> var hostname ...
- NSLocale
1.创建本地化对象 // 根据本地标识符创建本地化对象 NSLocale *usLocale = [[NSLocale alloc] initWithLocaleIdentifier"e ...
- 请大神看看10.10Beta1的AppleRTC怎么破？原版会导致BIOS重置！
看起来 跟10.9一样 sudo perl -pi -e 's|\x75\x2e\x0f\xb6|\xeb\x2e\x0f\xb6|' /System/Library/Extensions/Apple ...
- RESTful介绍
web框架的本质: socket服务端与浏览器的通信 socket(套接字):进程间的一种通信方式 socket服务端功能划分: a.负责与浏览器收发消息(socket通信) --- ...
- shell中test的使用
#/secondin/secondfirstshecho “please enter two numseconder”read firstread secondif test $first -eq $ ...