点击加减或手动改变表单值

 

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>点击加减或手动改变表单值(支持键盘控制)的jQuery插件@Mr.Think</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<meta name="author" content="Mr.Think又名青鸟简称i" />
<meta name="keywords" content="i,Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者" />
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." />
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
.i_tips{height:30px;margin-left:20px;color:#f60;font-size:14px;line-height:30px}
.i_box{margin:10px 20px;font-size:14px;float:left}
.i_box *{vertical-align:middle}
.i_box a{padding:2px 5px;background-color:#e9e9e9;border:1px solid #ccc;text-decoration:none;color:#585858;line-height:20px}
.i_box a:hover{color:#000}
.i_box input{width:30px;height:18px;margin:0 8px;padding:2px;border:1px solid #ccc;text-align:center;line-height:16px}
</style>
</head>
<body>
        <!--DEMO start-->
<div id="demo">
        <div class="i_tips"></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
        
</div> 
<script>
/*******************************
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2011.12.09
 * @可自由转载及使用,但请注明版权归属
 *******************************/
$.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);
            }
                }
        });
}
//调用
$( function() {
        
        $('.i_box').iVaryVal({},function(value,index){
                $('.i_tips').html('你点击的表单索引是:'+index+';改变后的表单值是:'+value);
        });
        
});
</script>


<!--DEMO end-->

  

 

 

 

 

 

 

 

 

 

 

posted @ 2012-06-05 13:34  赵小磊  阅读(480)  评论(0编辑  收藏  举报
回到头部