本篇来实现一个简单的按钮控件，虽然这个控件<input>类似，但是自定义的空间却无限的大，首先在componentui目录下添加com.ui.button.js文件，定义com.ui.button控件，继承com.ui.window控件，重写create, render, doMousedown, doMouseUp, _doResize事件，另外给容器thisWindow添加onmouseover,onmouseout两个事件，用于控制按钮的样式，然后把文件添加到staticScript.js列表中。最后为控件添加onClick事件，以供外部应用的时候，关联事件。
例子：
复制代码 代码示例:
/**
* 按钮控件类.
* 创建: QZZ
* 日期: 2014-04-06
*/
(function(undefined) {
nameSpace("com.ui");
com.ui.button = Extend(com.ui.window, {
/**
* 创建函数.
*/
create:function(){
this.base();
this.className = "com.ui.button";
this.logInfo("create");
},
/**
* 渲染函数.
*/
render:function(){
this.base();
var _this = this;
//添加鼠标划过事件
this.thisWindow.onmouseover = function(ev){
var ev = ev || event;
_this.doMouseOver(ev);
}
//添加鼠标划出事件
this.thisWindow.onmouseout = function(ev) {
var ev = ev || event;
_this.doMouseOut(ev);
}
//初始化caption
this.caption = this.thisWindow.innerHTML;
this.setStyle(this.thisWindow, "buttonCommonStyle");
//固定绑定点击事件，该事件可以在外部绑定
this.onClick = function(ev) {
alert("click " + this.caption);
}
},
/**
* 大小重置函数.
*/
_doResize:function() {
this.base();
//处理大小
if(this.thisWindow.style.top != this.option.top + "px") {
this.thisWindow.style.top = this.option.top + "px";
isResize = true;
}
if(this.thisWindow.style.left != this.option.left + "px") {
this.thisWindow.style.left = this.option.left + "px";
isResize = true;
}
this.thisWindow.style.lineHeight = this.option.height + "px";
},
/**
* 鼠标划过事件.
* ev 事件对象
*/
doMouseOver:function(ev) {
this.setStyle(this.thisWindow, "buttonOverStyle");
this.hasSelect = true;
this.focus = true;
this.mouseOver = true;
},
/**
* 鼠标划出事件.
* ev 事件对象
*/
doMouseOut:function(ev) {
this.setStyle(this.thisWindow, "buttonCommonStyle");
this.hasSelect = false;
this.focus = false;
this.mouseOver = false;
},
/**
* 鼠标按下事件.
* ev 事件对象
*/
doMouseDown:function(ev) {
this.setStyle(this.thisWindow, "buttonDownStyle");
},
/**
* 鼠标弹起事件.
* ev 事件对象
*/
doMouseUp:function(ev) {
if(this.mouseOver) {
this.setStyle(this.thisWindow, "buttonOverStyle");
if(typeof this.onClick == "function") {
//执行onclick事件
this.onClick(ev);
}
}
}
});
})();
在样式文件com.comStyle.css样式文件中添加相应的样式内容，
复制代码 代码示例:
.buttonCommonStyle {
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
border-right:1px solid #555555;
border-bottom:1px solid #555555;
position:absolute;
background-color:#DDDDDD;
text-align:center;
cursor:pointer;
}
.buttonOverStyle {
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
border-right:1px solid #555555;
border-bottom:1px solid #555555;
position:absolute;
background-color:#EEEEEE;
text-align:center;
cursor:pointer;
}
.buttonDownStyle {
border-top:1px solid #555555;
border-left:1px solid #555555;
border-right:1px solid #EEEEEE;
border-bottom:1px solid #EEEEEE;
position:absolute;
background-color:#EEEEEE;
text-align:center;
cursor:pointer;
}
有了上面的定义，可以在test.html文档中添加按钮的代码，
复制代码 代码示例:
<!DOCTYPE html>
<head><title>test</title>
<script src="../script/common/init.js" type="text/
javascript"></script>
</head>
<body>
<div id='test1' code='com.ui.window' option='{"height":"100","width":"100"}'></div>
<div id='test2' code='com.ui.button' option='{"height":"25","width":"100","top":"200","left":"100"}'>botton test</div>
<div id='test3' code='com.ui.button' option='{"height":"25","width":"100","top":"100","left":"200"}'>fixed</div>
</body>
</html>
通过前期的框架，该篇相当的简单，实现思路也很清析。
