引言

? ? ? 做一個(gè)手機(jī)端的訂單相關(guān)項(xiàng)目中，其中下訂單時(shí)需要用到數(shù)量加減的控件，可以設(shè)置默認(rèn)值，也可以設(shè)置最大值和最小值。使用jQuery這么長(zhǎng)時(shí)間了，平時(shí)很少去編寫屬于自己的插件，現(xiàn)在編寫的時(shí)候?qū)α⒚娴囊恍┰磉€不是很懂，比如說插件函數(shù)入口、插件內(nèi)如何編寫私有函數(shù)、如何調(diào)用含參私有函數(shù)、如果在使用插件時(shí)提示參數(shù)。都還需要一一去摸索。

?

jQuery實(shí)現(xiàn)方式

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

? ? 2、對(duì)象級(jí)別插件開發(fā)。 ?$("div").highlight()。

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

?

效果圖

?

默認(rèn)使用方法

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

?

jQuery.plusready.js

/*** 購物數(shù)量加減* * **/ (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; //返回當(dāng)前實(shí)例，已保證插件返回的對(duì)象支持jQuery鏈?zhǔn)讲僮鱹})(jQuery)

　　

轉(zhuǎn)載于:https://www.cnblogs.com/sword-successful/p/4636085.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。