点击加减或手动改变表单值(支持键盘控制)的jQuery插件

大多电子商务网站购物车页面,都有通过点击来增减商品数量的功能,特地根据常规功能写了一个jQuery插件。
购物车常用功能
实现的功能:
1、可通过点击增加或减小定义的input值;
2、可手动输入input值,且支持键盘控制:上右为加,下左为减;
3、可设定表单的最大最小值,并对input值进行了非负整数判断;
4、定义了一个全局对象,存储表单最后的input值和所改变input的索引值。若不希望全局对象污染整个js,可在插件中稍稍修改一下,把想返回的值传到一个hidden input中;
5、定义了一个回调函数,方便扩展。比如,在点击或输入数值后重新计算价格数量等。
点此查看样列
jQuery代码:

$.fn.iVaryVal=function(iSet){
	/*
	 * Minus:点击元素--减小
	 * Add:点击元素--增加
	 * Input:表单元素
	 * Min:表单的最小值,非负整数
	 * Max:表单的最大值,正整数
	 * Fun:回调函数
	 */
	iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20,Fun:null},iSet);
	var C=null,O=null;
	//输出值全局对象[若担心全局对象污染,可定义一个hidden表单,向其传值]
	$GLOBAL={};
	//增加
	iSet.Add.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
			//输出当前改变后的值
			$GLOBAL.val=iSet.Input.eq(i).val();
			$GLOBAL.index=i;
			//回调函数
			if (typeof iSet.Fun == 'function') {
				iSet.Fun.call(this);
		  	}
		});
	});
	//减少
	iSet.Minus.each(function(i){
		$(this).click(function(){
			O=parseInt(iSet.Input.eq(i).val());
			O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
			$GLOBAL.val=iSet.Input.eq(i).val();
			$GLOBAL.index=i;
			//回调函数
			if (typeof iSet.Fun == 'function') {
				iSet.Fun.call(this);
		  	}
		});
	});
	//手动
	iSet.Input.bind({
		'click':function(){
			O=parseInt($(this).val());
			$(this).select();
		},
		'keyup':function(){
			if($(this).val()!=''){
				C=parseInt($(this).val());
				//非负整数判断
				if(/^[1-9]\d*|0$/.test(C)){
					$(this).val(C);
					O=C;
				}else{
					$(this).val(O);
				}
			}
			//键盘控制:上右--加,下左--减
			if(e.keyCode==38 || e.keyCode==39){
				iSet.Add.eq(iSet.Input.index(this)).click();
			}
			if(e.keyCode==37 || e.keyCode==40){
				iSet.Minus.eq(iSet.Input.index(this)).click();
			}
			//输出当前改变后的值
			$GLOBAL.val=$(this).val();
			$GLOBAL.index=iSet.Input.index(this);
			//回调函数
			if (typeof iSet.Fun == 'function') {
				iSet.Fun.call(this);
		  	}
		},
		'blur':function(){
			$(this).trigger('keyup');
			if($(this).val()==''){
				$(this).val(O);
			}
			//判断输入值是否超出最大最小值
			if(iSet.Max){
				if(O>iSet.Max){
					$(this).val(iSet.Max);
				}
			}
			if(O<iSet.Min){
				$(this).val(iSet.Min);
			}
			//输出当前改变后的值
			$GLOBAL.val=$(this).val();
			$GLOBAL.index=iSet.Input.index(this);
			//回调函数
			if (typeof iSet.Fun == 'function') {
				iSet.Fun.call(this);
		  	}
		}
	});
}

若有bug,请以评论形式及时反馈~

共有 4 条评论.

发表评论557 Views

  1. 喜欢这些分享,多谢!

    [回复]

  2. 好东西啊 很实用的.感谢分享

    [回复]

  3. 这可是个好东西啊

    [回复]

  4. 楼主辛苦了 写这么好的文章给大家普及知识

    [回复]

发表评论[无需注册]