自定义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