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

   做一个手机端的订单相关项目中，其中下订单时需要用到数量加减的控件，可以设置默认值，也可以设置最大值和最小值。使用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)