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