引言

? ? ? 做一個手機端的訂單相關項目中，其中下訂單時需要用到數量加減的控件，可以設置默認值，也可以設置最大值和最小值。使用jQuery這么長時間了，平時很少去編寫屬于自己的插件，現在編寫的時候對立面的一些原理還不是很懂，比如說插件函數入口、插件內如何編寫私有函數、如何調用含參私有函數、如果在使用插件時提示參數。都還需要一一去摸索。

?

jQuery實現方式

? ? 1、類級別插件開發。 $.ajax()。

? ? 2、對象級別插件開發。 ?$("div").highlight()。

? ? 3、jquery UI提供的widget方法。 第三種方法也是我在最近的項目中看另一個同時寫的，同時還用到嚴格模式(strict)這些都是我以前沒有接觸過的。

?

效果圖

?

默認使用方法

$("#plusHelper").plusready({default:3,max:10,min:1}); //頁面上放一個div即可

?

jQuery.plusready.js

/*** 購物數量加減* * **/ (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)

　　

轉載于:https://www.cnblogs.com/sword-successful/p/4636085.html

總結

以上是生活随笔為你收集整理的自己动手丰衣足食之 jQuery 数量加减插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。