自定义Html标签（自定义按钮标签）

2011-03-10；JavaScript练习
在html页面中，让以下自定义标签：
            < xz:imagebutton >< img src ="/Framework/Icons/icon003a2.gif" /> 新建 </ xz:imagebutton >
            < xz:imagebutton >< img src ="/Framework/Icons/icon003a4.gif" /> 编辑 </ xz:imagebutton >
            < xz:imagebutton >< img src ="/Framework/Icons/icon003a6.gif" /> 待发布 </ xz:imagebutton >
            < xz:inputbutton >
                < input type ="button" value ="保存" />
            </ xz:inputbutton >
            < xz:inputbutton >
                < input type ="button" value ="取消" />
            </ xz:inputbutton >
在页面加载完毕后有如下效果：（样式来源于ZCMS）
imagebutton：

inputbutton：

实现如下：
Main.js：

var USER_DEFINE_TAG = " Xz " ;

var isIE = navigator.userAgent.toLowerCase().indexOf( " msie " ) != - 1 ;
var isGecko = navigator.userAgent.toLowerCase().indexOf( " gecko " ) != - 1 ;

/* 导入自定义标签命名空间 */
if (isIE){document.namespaces.add(USER_DEFINE_TAG)}

/* 获得自定义标签 */
var GetUDF = function (fullTagName){
var tName = null ;
if (isIE){
tName = fullTagName.replace(USER_DEFINE_TAG + " : " , "" );
}
if (isGecko){
tName = fullTagName
}
return document.getElementsByTagName(tName)
}
/* 获得自定义标签TagName */
var GetUDFTagName = function (d){
return isIE ? USER_DEFINE_TAG + " : " + d.tagName : d.tagName;
}

var extend = function (d,c){
for ( var p in c){ d[p] = c[p]}
return d;
}

$(document).ready( function (){
var imgBtns = GetUDF( " Xz:imageButton " );
while (imgBtns.length > 0 ){
new Button({object:imgBtns[ 0 ]});
}

var iptBtns = GetUDF( " Xz:inputButton " );
while (iptBtns.length > 0 ){
new Button({object:iptBtns[ 0 ]});
}
})

Button.js：

var imageButtons = [], inputButtons = [];
function Button(options){
if (options.object){
if ( typeof options.object == " string " ){
options.object = document.getElementById(options.object);
}
var replaceTag = GetUDFTagName(options.object).toLowerCase();
if (options.object && (replaceTag == " xz:imagebutton " || replaceTag == " xz:inputbutton " )){
options.type = replaceTag == " xz:inputbutton " ? " input " : " image " ;
this .init(options);
}
}
}
Button.ImageOption = {
object: null ,
wordWrapper: " b " ,
ensembleWrapper: " a " ,
className: " imageButton "
}
Button.InputOption = {
object: null ,
ensembleWrapper: " a " ,
className: " inputButton "
}

Button.prototype.init = function (options){
var initOptionType = options.type == " image " ? Button.ImageOption : Button.InputOption;
var newOption = extend(initOptionType,options);
for ( var p in newOption){
this [p] = newOption[p];
}
var e_wrapper = document.createElement( this .ensembleWrapper);
// e_wrapper.className = this.className;
var e_wrapperId = this .object.getAttribute( " id " );
var e_onclick = this .object.getAttribute( " onclick " );

if (e_wrapperId){
e_wrapper.id = e_wrapperId;
} else {
var btnId = options.type == " image " ? " imgBtn " + imageButtons.length: " iptBtn " + inputButtons.length;
e_wrapper.id = btnId;
}
if (e_onclick){
e_wrapper.setAttribute( " onclick " ,e_onclick);
}
if (e_wrapper.tagName.toLowerCase() == " a " ){
e_wrapper.setAttribute( " href " , " javascript:void(0); " );
}

if ( this .type == " image " ){
var w_wrapper = document.createElement( this .wordWrapper);
var text = this .innerText( this .object);
var w_text = document.createTextNode(text);
w_wrapper.appendChild(w_text);
var image = null ;
var cns = this .object.childNodes;
for ( var i = 0 ; i < cns.length; i ++ ){
if (cns[i].tagName && cns[i].tagName.toLowerCase() == " img " ){
e_wrapper.appendChild(cns[i]);
break ;
}
}
e_wrapper.appendChild(w_wrapper);
} else {
var cns = this .object.childNodes;
for ( var i = 0 ; i < cns.length; i ++ ){
if (cns[i].tagName && cns[i].tagName.toLowerCase() == " input " ){
e_wrapper.appendChild(cns[i]);
break ;
}
}
}
// 将处理过的新按钮替换掉原生按钮
this .object.parentNode.replaceChild(e_wrapper, this .object);
this .object = e_wrapper;
e_wrapper.className = this .className;
// 将相应的按钮类型放入到相应的集合，以便后续操作
if ( this .type == " image " ){
imageButtons.push(e_wrapper);
} else {
inputButtons.push(e_wrapper);
}
}

Button.prototype.innerText = function (dom){
return dom.innerText || dom.textContent;
}

Button.html：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 表单元素 </ title >
< meta http-equiv ="X-UA-Compatible" content ="IE=EmulateIE7" />
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link href ="/Framework/Css/Common.css" rel ="stylesheet" type ="text/css" />
< link href ="/Framework/Css/Controls.css" rel ="Stylesheet" />
< script src ="/Framework/Js/Jquery.js" type ="text/javascript" ></ script >
< script src ="/Framework/Controls/Select.js" type ="text/javascript" ></ script >
< script src ="/Framework/Controls/Button.js" type ="text/javascript" ></ script >
< script src ="/Framework/Js/Main.js" type ="text/javascript" ></ script >
</ head >
< body >
< xz:imagebutton >< img src ="/Framework/Icons/icon003a2.gif" /> 新建 </ xz:imagebutton >
< xz:imagebutton >< img src ="/Framework/Icons/icon003a4.gif" /> 编辑 </ xz:imagebutton >
< xz:imagebutton >< img src ="/Framework/Icons/icon003a6.gif" /> 待发布 </ xz:imagebutton >
< xz:inputbutton >
< input type ="button" value ="保存" />
</ xz:inputbutton >
< xz:inputbutton >
< input type ="button" value ="取消" />
</ xz:inputbutton >
</ p >
</ form >
</ body >
</ html >

Controls.css：

a.imageButton {
-moz-user-select : none ;
background : url("/Framework/Images/Controls/imgBtn_leftBg.gif") no-repeat scroll left center transparent ;
display : inline-block ;
*display : inline ;
zoom : 1 ;
height : 24px ;
margin : 0 5px 0 0 ;
text-decoration : none ;
}

a.imageButton img {
margin : 0 0 4px 3px ; /* 原：margin: 2px 0 4px 4px; */
vertical-align : middle ;
border : none ;
*margin : 1px 0 4px 2px ;
}

a.imageButton b {
background : url("/Framework/Images/Controls/imgBtn_rightBg.gif") no-repeat scroll right center transparent ;
color : #666666 ;
cursor : pointer ;
display : inline-block ;
*display : inline ;
*vertical-align : top ;
zoom : 1 ;
font-weight : normal ;
height : 24px ;
line-height : 24px ;
padding : 0 8px 0 3px ;
white-space : nowrap ;
*padding : 1px 8px 0px 3px ;
*height : 23px ;
*line-height : 23px ;
}

a.imageButton:hover {
background : url("/Framework/Images/Controls/imgBtn_Overbg_left.gif") no-repeat scroll left center transparent ;

}
a.imageButton:hover b {
background : url("/Framework/Images/Controls/imgBtn_OverBg_right.gif") no-repeat scroll right center transparent ;
color : #114477 ;
}

a.inputButton {
display : inline-block ;
+zoom : 1 ;
+display : inline ;
vertical-align : middle ;
height : 21px ; /* 似乎用22px更好点，但其他表单标准高度已经为21px */
margin-right : 2px ;
background : transparent url("/Framework/Images/Controls/inputbtnBg.gif") no-repeat 0 0 ;
padding-left : 2px ;
text-decoration : none ;
padding-top : 0px ;
}
a.inputButton input {
background : transparent url("/Framework/Images/Controls/inputbtnBg.gif") no-repeat right top ;
position : relative ;
left : 2px ;
color : #09D ;
*height : 21px ;
line-height : 21px ;
_line-height : 15px ;
padding : 0 11px 2px 7px ;
+padding : 0 14px 0 10px ; /* +padding: 1px 14px 0 10px; */
vertical-align : top ;
cursor : pointer ;
border : 0 none #fff ;
outline : none ;
outline-style : none ;
+overflow : visible ;
}

a.inputButton:hover {
background : transparent url("/Framework/Images/Controls/inputbtnBg_over.gif") no-repeat 0 0 ;
text-decoration : none ;
border : 0 none #fff ;
}

a.inputButton:hover input {
background : transparent url("/Framework/Images/Controls/inputbtnBg_over.gif") no-repeat right top ;
border : 0 none #fff ;
}

下载示例： button-demo.rar

转载于:https://www.cnblogs.com/liemkell/archive/2011/05/06/2038926.html