点击加减或手动改变表单值(支持键盘控制)的jQuery插件
大多电子商务网站购物车页面,都有通过点击来增减商品数量的功能,特地根据常规功能写了一个jQuery插件。
实现的功能:
1、可通过点击增加或减小定义的input值;
2、可手动输入input值,且支持键盘控制:上右为加,下左为减;
3、可设定表单的最大最小值,并对input值进行了非负整数判断;
4、定义了回调函数,输出表单最后的input值和所改变input的索引值。也可在插件中稍稍修改一下,把想返回的值传到一个hidden input中;
$.fn.iVaryVal=function(iSet,CallBack){ /* * Minus:点击元素--减小 * Add:点击元素--增加 * Input:表单元素 * Min:表单的最小值,非负整数 * Max:表单的最大值,正整数 */ iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet); var C=null,O=null; //插件返回值 var $CB={}; //增加 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); //输出当前改变后的值 $CB.val=iSet.Input.eq(i).val(); $CB.index=i; //回调函数 if (typeof CallBack == 'function') { CallBack($CB.val,$CB.index); } }); }); //减少 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); $CB.val=iSet.Input.eq(i).val(); $CB.index=i; //回调函数 if (typeof CallBack == 'function') { CallBack($CB.val,$CB.index); } }); }); //手动 iSet.Input.bind({ 'click':function(){ O=parseInt($(this).val()); $(this).select(); }, 'keyup':function(e){ 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(); } //输出当前改变后的值 $CB.val=$(this).val(); $CB.index=iSet.Input.index(this); //回调函数 if (typeof CallBack == 'function') { CallBack($CB.val,$CB.index); } }, '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); } //输出当前改变后的值 $CB.val=$(this).val(); $CB.index=iSet.Input.index(this); //回调函数 if (typeof CallBack == 'function') { CallBack($CB.val,$CB.index); } } }); }
相关推荐
开心就好 2020-06-10
huha 2020-10-16
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26