重新封装按钮样式

jQuery按钮样式封装

最新推荐文章于 2023-04-22 14:36:15 发布

原创最新推荐文章于 2023-04-22 14:36:15 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #ITeye #Blog #ViewUI

UI设计专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery简化按钮样式的封装方法。通过将a标签和input元素包裹进特定的span标签内，实现统一的样式控制，使得按钮的外观更加一致且易于管理。

最近做的一个项目需要用到很多按钮样式，本想用样式表直接完成的，可是调用的时候有些麻烦，所以借用jquery重新封装一下按钮样式，此内容是为了让自己以后能看懂。个人记忆不好，自己做过的东西，一段时间不用就会忘了。

1.完成基本样式

html部分

<span class="z-btn-box"><span class="z-btn-left"><a href="#" class="icon-cls">添加</a></span></span>

.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个按钮样式了。