自己动手丰衣足食之 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)