重新封装按钮样式
最近做的一个项目需要用到很多按钮样式，本想用样式表直接完成的，可是调用的时候有些麻烦，所以借用jquery重新封装一下按钮样式，此内容是为了让自己以后能看懂。个人记忆不好，自己做过的东西，一段时间不用就会忘了。
?
1.完成基本样式
?
?html部分
<span name="code">.z-btn-box,z-btn-box-hover{color:#444;background:url(../images/button/btnout_bg_right.gif) no-repeat top right;font-size:12px;text-decoration:none;display:inline-block;display:-moz-inline-stack;*display:inline;zoom:1;height:24px;line-height:24px;padding-right:10px; cursor:pointer;}.z-btn-box input{background:transparent;border:none; margin-bottom:8px;background-repeat:no-repeat; background-position:left top;cursor:pointer;} .z-btn-box a{background:transparent;border:none; padding:2px;*padding-top:0px; padding-left:20px; background-repeat:no-repeat; background-position:left center; text-decoration:none; color:#333;}.z-btn-left,.z-btn-left-hover{display:block;background:url(../images/button/btnout_bg_left.gif) no-repeat top left;padding:5px 0px 5px 10px;line-height:14px;}.z-btn-box-hover{background-image:url(../images/button/btnover_bg_right.gif);}.z-btn-left-hover{background-image:url(../images/button/btnover_bg_left.gif);}?
?完成此基本后，样式基本完成。
但使用的时候很不方便。（附件:按钮样式）
每次都要加上sapn
2.使用jquery把a,input标记包裹起来，这样就不用多写代码了。
(function ($) { /** * @fileOverview 简单按钮样式封装 * @author <a href="http://gleams.iteye.com/blog/985989">星月</a> * @version 0.1 */ $.fn.linkButton = init; function init() { inputButton(); aButton(); buttonStyle(); } function wrapSapn(targe){ var wrapCode = "<span class='z-btn-box'><span class='z-btn-left'></span></span>"; var i_icon = $(targe).attr('icon'); $(targe).wrap(wrapCode).addClass(i_icon); } /** * @description inputButton() */function inputButton() {//button $('input[type="button"]').each(function(){if($(this).attr('value')!=""){ wrapSapn(this); $(this).css('padding-left', '20px'); }});//submit $('input[type="submit"]').each(function(){ if($(this).attr('value')!=""){ wrapSapn(this); $(this).css('padding-left', '20px');} });//submit $('input[type="reset"]').each(function(){ if($(this).attr('value')!=""){ wrapSapn(this); $(this).css('padding-left', '20px');} });}function aButton() {//a $('a').each(function(){ if($(this).text()!=""){ wrapSapn(this); $(this).css('padding-left', '20px');} });}function buttonStyle(){ $("span.z-btn-box").hover(function () { $(this).toggleClass("z-btn-box-hover"); $(this).children().toggleClass("z-btn-left-hover"); });//鼠标经过样式}//启动 $(function () { $(".z-btn-box").linkButton(); })})(jQuery);?重新包裹后，调用就方便了。
<input type="button" icon='icon-add' value="热饭" />
?? 这样可以使用在样式表里定义的55个按钮样式了。
?