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 ...
随机推荐
- Spring @Transactional at interface
java - Where should I put @Transactional annotation: at an interface definition or at an implementin ...
- bxslider 使用帮助
“bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备,适应各种屏幕: 支持多种滑动模式,水平.垂直以及淡入淡出效果: 支持图片.视频以及任意html内容: 支持触 ...
- Spring启动流程—源码解读
https://blog.csdn.net/yangliuhbhd/article/details/80790761 Spring的AbstractApplicationContext的refresh ...
- PAT (Basic Level) Practise （中文）-1032. 挖掘机技术哪家强(20)
PAT (Basic Level) Practise (中文)-1032. 挖掘机技术哪家强(20) http://www.patest.cn/contests/pat-b-practise/1032 ...
- HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
- Xcode 6 创建 Objective-C category
1. Command + N 2. 选择 iOS - Source - Objective-C File 3.File Type 选择 Category,Class 填基于的类名,File填扩展的名
- CS193p Lecture 7 - Views, Gestures
Views 如何绘制自定义图像 Gestures 如何处理用户手势操作 Views 1.它是基本的构造块,代表屏幕上一块矩形区域,定义了一个坐标空间,在此空间中可以绘制,可以添加触控事件: 2.它是分 ...
- C语言格式化说明符
1.1.1 格式化输入输出函数一.printf()函数printf()函数是格式化输出函数, 一般用于向标准输出设备按规定格式输出信息.在编写程序时经常会用到此函数.printf()函数的调用格式为: ...
- 【技巧：字符串同构】Avendesora
判断字符串“同构”的技巧 题目大意 给定A,B两个序列,要求B在A中出现的次数以及位置.定义字符变换:把所有相同的字符变为另一种字符:两个字符串相等:当且仅当一个字符串可以在若干次字符变换之后变为另一 ...
- Python中单元测试出错了，会怎么样？
在上一篇中,我们看到了单元测试正常通过时的情况,如果我们边修改一下要测试的函数,然后再运行单元测试,会出现什么情况. 原say_hello_name.py def hello_name(name): ...