jquery 按钮插件

最新推荐文章于 2022-04-20 23:19:31 发布

han_hanker

最新推荐文章于 2022-04-20 23:19:31 发布

阅读量612

点赞数

分类专栏： jquery-plugin 文章标签： jquery 插件

jquery-plugin 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转载于： http://mrthink.net/

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<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; -webkit-user-select:none;user-select:none;}
.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}
.J_add,.J_add.no-zero-right{
    background: orange;
}
.J_minus.no-zero-left{
    background: orange;
}
</style>

</head>
<body>
<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> 
</body>
</html>
<script type="text/javascript" src="plugin/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="plugin/slider.js"></script>

<script type="text/javascript">
    $( function() {

        $('.i_box').iVaryVal({},function(value,index){
                $('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
        });

});
</script>

/*******************************
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2011.12.09
 * @可自由转载及使用,但请注明版权归属
 *******************************/

;(function($,window,document,undefined){
  $.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);
        // 把所有元素都绑在isSet对象中
        var C=null,O=null; 
        // O input中的值
        //插件返回值
        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;
                        test(this, $CB.val);
                        //回调函数
                        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;
                test(this, $CB.val);
                        //回调函数
                        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);
                        //回调函数
                        test(this, $CB.val);
                        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);
                        test(this, $CB.val);
                        //回调函数
                        if (typeof CallBack == 'function') {
                            CallBack($CB.val,$CB.index);
                        }
                    }
                });
        function test (selector,c) {
         var children=$(selector).parent().children();
         if (c==0) {

            children.eq(0).removeClass("no-zero-left").addClass("zero-left");
            children.eq(2).removeClass("zero-right").addClass("no-zero-right");
        }else if (c== iSet.Max) {
            children.eq(0).removeClass("zero-left").addClass("no-zero-left");
            children.eq(2).removeClass("no-zero-right").addClass("zero-right");
        }else{
            children.eq(0).removeClass("zero-left").addClass("no-zero-left");
            children.eq(2).removeClass("zero-right").addClass("no-zero-right");
        }
    }
}



})(jQuery,window,document);

han_hanker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 按钮插件

转载于： http://mrthink.net/html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style>/*demo css*/.i_tips{height:30px;margin-left:20px;color:#f60;font-size
复制链接

扫一扫

专栏目录