在做一个项目的过程中,需要自己实现这样一个组件,效果图如下:
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,转载请注明,并欢迎大家不吝赐教。