自定义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：
Button.js：
Button.html：
Controls.css：
下载示例：button-demo.rar
在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
