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，转载请注明，并欢迎大家不吝赐教。