HTML+CSS+jQuery實現的一個數值增減組件NumericUpDown

在做一個項目的過程中，需要自己實現這樣一個組件，如下：

0. 功能分析：

當滑鼠點擊向下與向下按鈕的時候，左邊的數值要隨之增減。當然這樣的組件在網上比比皆是，我還是決心自己做一個試試。

1. 首先是切圖。

切成下面這樣的圖，左邊為正常顯示的背景，右邊為滑鼠經過的背景。

2. 決定html結構。

如下：

<div id="addsubtract1" class="addsubtract"><div class="addsubtract-left"></div><div class="addsubtract-right cf"><a class="ba addsubtract-right-top" href="javascript:;" title="增加">增加</a><a class="ba addsubtract-right-bottom" href="javascript:;" title="減少">減少</a></div></div>

3. 寫CSS。

如下：

/*Begin *addsubtract plugin */.addsubtract {width: 31px;height: 18px;float: left;}.addsubtract .addsubtract-left {width: 17px;height: 16px;float: left;background-color: #fff;border: 1px #abadb3 solid;text-align: center;}.addsubtract .addsubtract-right {float: left;border: 1px #abadb3 solid;border-left: none;}.addsubtract a.addsubtract-right-top,.addsubtract a.addsubtract-right-bottom{width: 9px;height: 8px;background: url("images/icons.gif") no-repeat scroll 0 -36px transparent;}.addsubtract a.addsubtract-right-bottom {background-position: 0 -44px;}.addsubtract a.addsubtract-right-top:hover {background-position: -10px -36px;}.addsubtract a.addsubtract-right-bottom:hover {background-position: -10px -44px;}/*End *addsubtract plugin */

 4. 添加互動功能。

用jQuery外掛程式編寫，以方便代碼的統一管理與功能的擴充。如下：

;(function($) {$.fn.extend({/*************************************************************** * @author Russell CG. * @author blog http://www.cnblogs.com/pinocchioatbeijing/ * @2012.7.23 * @可自由轉載及使用,但請註明著作權歸屬 **************************************************************/iAddSubtract : function(options) {var isetting = {el : $(".addsubtract"),val : ".addsubtract-left",add : ".addsubtract-right>.addsubtract-right-top",sub : ".addsubtract-right>.addsubtract-right-bottom",defaultvalue : 1,// 預設值upperlimit : null,// 上限lowerlimit : null// 下限};options = $.extend(isetting, options || {});return isetting.el.each(function() {var $this = $(this), $val = $this.find(isetting.val), $add = $this.find(isetting.add), $sub = $this.find(isetting.sub);$val.html(isetting.defaultvalue);$add.click(function() {if (isetting.upperlimit === null|| (isetting.upperlimit&& typeof isetting.upperlimit == "number" && isetting.defaultvalue < isetting.upperlimit)) {$val.html(++isetting.defaultvalue);}});$sub.click(function() {if (isetting.lowerlimit === null|| (isetting.lowerlimit&& typeof isetting.lowerlimit == "number" && isetting.defaultvalue > isetting.lowerlimit)) {$val.html(--isetting.defaultvalue);}});// console.log($(this).find(isetting.val).html());});}});})(jQuery);

 5. 調用。

$("").iAddSubtract({el : $("#addsubtract1"),defaultvalue : 0})；

 6. 總結。

該外掛程式能夠實現簡單的控制項功能，但是對於外掛程式編寫的原則還不是很熟悉，所以可能很多地方沒有注意到，Anyway先記下來，以後可以改進。在預設選項值的提供與意外情況的處理方面，也還需要進一步完善。

本文來自pinocchioatbeijing（專註前端技術 追求至美生活 以文會友）在部落格園的部落格，文章URL：http://www.cnblogs.com/pinocchioatbeijing/archive/2012/07/23/2605399.html，轉載請註明，並歡迎大家不吝賜教。