自己動手豐衣足食之 jQuery 數量加減插件

引言

      做一個手機端的訂單相關項目中，其中下訂單時需要用到數量加減的控件，可以設置默認值，也可以設置最大值和最小值。使用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)