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