ボタンスタイルを再カプセル化

最近作ったアイテムはボタンスタイルをたくさん使う必要があります.スタイルシートで直接完成したいと思っていましたが、呼び出すときに面倒なので、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個のボタンスタイルを使用することができます.