自己动手丰衣足食之 jQuery 数量加减插件

  1. 云栖社区>
  2. 博客>
  3. 正文

自己动手丰衣足食之 jQuery 数量加减插件

cometwo123 2016-02-18 10:30:00 浏览1007
展开阅读全文

   做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值。使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口、插件内如何编写私有函数、如何调用含参私有函数、如果在使用插件时提示参数。都还需要一一去摸索。

 

jQuery实现方式

    1、类级别插件开发。 $.ajax()。

    2、对象级别插件开发。  $("div").highlight()。

    3、jquery UI提供的widget方法。 第三种方法也是我在最近的项目中看另一个同时写的,同时还用到严格模式(strict)这些都是我以前没有接触过的。

 

效果图

 

默认使用方法

1
2
3
4
5
6
$("#plusHelper").plusready({
                    default:3,
                    max:10,
                    min:1
                });
//页面上放一个div即可

 

jQuery.plusready.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * 购物数量加减
 *
 * **/
(function(){
     
    $.fn.plusready=function(options){
        var defaults={
            min:0,
            max:10,
            default:0
        };
         
        var op = $.extend(defaults,options);
         
        var $btn_plus=$("<button id='plus'>加</button>");
        var $btn_minus=$("<button id='minus'>减</button>");
        var $input=$("<input type='text' id='num' value='"+op.default+"' readonly='readonly' style='width:30px;height:16px;text-align:center;' />")
         
         
        var $this=$(this);
        $this.append($btn_plus);
        $this.append($input);
        $this.append($btn_minus);
         
        var num = parseInt($input.val());
        $btn_plus.click(function(){
             
            if(num<op.max){
                num++;
                $input.val(num);
            }      
        });
         
        $btn_minus.click(function(){           
            if(num>op.min){
                num--;
                $input.val(num);
            }
        });
         
        return this//返回当前实例,已保证插件返回的对象支持jQuery链式操作
    }
     
     
})(jQuery)

  

/**
 * 购物数量加减
 *
 * **/
(function(){
     
    $.fn.plusready=function(options){
        var defaults={
            min:0,
            max:10,
            default:0
        };
         
        var op = $.extend(defaults,options);
         
        var $btn_plus=$("<button id='plus'>加</button>");
        var $btn_minus=$("<button id='minus'>减</button>");
        var $input=$("<input type='text' id='num' value='"+op.default+"' readonly='readonly' style='width:30px;height:16px;text-align:center;' />")
         
         
        var $this=$(this);
        $this.append($btn_plus);
        $this.append($input);
        $this.append($btn_minus);
         
        var num = parseInt($input.val());
        $btn_plus.click(function(){
             
            if(num<op.max){
                num++;
                $input.val(num);
            }      
        });
         
        $btn_minus.click(function(){           
            if(num>op.min){
                num--;
                $input.val(num);
            }
        });
         
        return this//返回当前实例,已保证插件返回的对象支持jQuery链式操作
    }
     
     
})(jQuery)

网友评论

登录后评论
0/500
评论
cometwo123
+ 关注