标签：javascript web 控件 js 框架
在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，
1、toolBar控件，简单说就是工具栏容器，
2、toolButton控件，即工具栏上的按钮控件，该按钮控件包括图标和文字两部份，
3、则是分隔符控件，一般分隔符控件也是在toolButton控件基础上引申出来的，
为了简单易学，我们这里直接用上一篇的控件作为toolBar控件使用，也就是我们这次编写出来的toolButton控件直按放一Panel控件上，
首先在component\ui\文件夹下添加控件文件，com.ui.toolButton.js 如下，
定义com.ui.toolButton控件类，继承com.ui.panel控件。
/**
* 按钮控件类.
* 创建: QZZ
* 日期: 2014-04-06
*/
(function(undefined) {
nameSpace("com.ui");
com.ui.toolButton = Extend(com.ui.panel, {
/**
* 创建函数.
*/
create:function(){
this.base();
this.className = "com.ui.toolButton";
this.logInfo("create");
}，
/**
* 渲染函数.
*/
render:function() {
}
});
})();
渲染函数如下，把渲染方式默认为“alLeft”，添加一个type属性,用于区别split控件或button控件，分别进行渲染。
1. split控件，则直接创建一个div,设置样式，然后宽度设置为8px;
2. button控件 则创建一个table，分三层次， 第一层用于设置高度，第二层用于放图标，第三层次用于放文字，图标与文字都通过配置方式获得。
/**
* 渲染函数.
*/
render:function(){
this.base();
this.setAlign("alLeft");
if(this.option.type === "split") {
this.setWidth(8);
this.setStyle(this.win, "toolButtonSplitStyle");
var splitDiv = this.createElement("div");
this.setStyle(splitDiv,"toolSplitStyle");
this.win.appendChild(splitDiv);
} else {
//初始化caption
this.caption = this.win.innerHTML;
if(this.option.icon != null) {
this.tabIcon = this.createElement("table");
this.setStyle(this.tabIcon, "toolIconTabStyle");
this.topCol = this.tabIcon.insertRow(0).insertCell(0);
this.topCol.style.height = "1px";
var col = this.tabIcon.insertRow(1).insertCell(0)
col.innerHTML = '<img src="'+this.option.icon
+'" style="width: 18px; height: 18px;"></img>';
this.setStyle(col, "toolIconTdStyle");
col = this.tabIcon.insertRow(2).insertCell(0);
col.innerHTML = this.caption;
this.setStyle(col, "toolIconTdStyle");
this.win.innerHTML = "";
this.win.appendChild(this.tabIcon);
}
this.setStyle(this.win, "toolButtonCommonStyle");
}
},
函数中用到几个画边框的样式，把他们都添加到com.comStyle.css文件中，如下：
.toolButtonSplitStyle {
border-top:0px solid #EEEEEE;
border-left:0px solid #EEEEEE;
border-right:0px solid #555555;
border-bottom:0px solid #555555;
padding-left:4px;
position:relative;
}
.toolSplitStyle {
border-top:0px solid #EEEEEE;
border-left:0px solid #EEEEEE;
border-right:1px solid #EEEEEE;
border-bottom:0px solid #555555;
height:40px;
top:10px;
width:1px;
background-color:#555555;
margin:auto;
position:relative;
}
.toolIconTabStyle{
margin:auto;
top:10px;
}
.toolIconTdStyle {
text-align:center;
height:16px;
}
.toolButtonCommonStyle {
border-top:0px solid #EEEEEE;
border-left:0px solid #EEEEEE;
border-right:0px solid #555555;
border-bottom:0px solid #555555;
position:relative;
text-align:center;
cursor:pointer;
}
.toolButtonOverStyle {
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
border-right:1px solid #555555;
border-bottom:1px solid #555555;
position:relative;
text-align:center;
cursor:pointer;
}
.toolButtonDownStyle {
border-top:1px solid #555555;
border-left:1px solid #555555;
border-right:1px solid #EEEEEE;
border-bottom:1px solid #EEEEEE;
position:relative;
text-align:center;
cursor:pointer;
}
下面继续添加按钮的相关鼠标事件、大小变化事件（doResize）和修改文字内容方法，
思路类似前前一篇的按钮控件，
//设置显示属性
setCaption:function(caption) {
this.caption = caption;
if(this.tabIcon != null) {
this.tabIcon.rows[1].cells[0].innerHTML = '<img src="'+this.option.icon+'" style="width: 18px; height: 18px;"></img>';
this.tabIcon.rows[2].cells[0].innerHTML = this.caption;
} else {
this.win.innerHTML = this.imgStr + this.caption;
}
},
/**
* 大小重置函数.
*/
_doResize:function(el) {
this.base(el);
if(this.option.icon == null) {
this.win.style.lineHeight = this.option.height + "px";
}
},
/**
* 鼠标划过事件.
* ev 事件对象
*/
doMouseOver:function(ev) {
if(this.option.type === "split") {
return;
}
this.setStyle(this.win, "toolButtonOverStyle");
this.hasSelect = true;
this.focus = true;
this.mouseOver = true;
},
/**
* 鼠标划出事件.
* ev 事件对象
*/
doMouseOut:function(ev) {
if(this.option.type === "split") {
return;
}
this.setStyle(this.win, "toolButtonCommonStyle");
this.hasSelect = false;
this.focus = false;
this.mouseOver = false;
},
/**
* 鼠标按下事件.
* ev 事件对象
*/
doMouseDown:function(ev) {
if(this.option.type === "split") {
return;
}
this.setStyle(this.win, "toolButtonDownStyle");
this.topCol.style.height = "2px";
},
/**
* 鼠标弹起事件.
* ev 事件对象
*/
doMouseUp:function(ev) {
if(this.option.type === "split") {
return;
}
if(this.mouseOver) {
this.setStyle(this.win, "toolButtonOverStyle");
this.topCol.style.height = "1px";
if(typeof this.onClick == "function") {
//执行onclick事件
this.onClick(ev);
}
}
}
到此，控件已编写完成，下面我们用它来编写例子，如test.html文件，
<!DOCTYPE html>
<head><title>test</title>
<script src="../script/common/init.js" type="text/javascript"></script>
</head>
<body code="controllor/test.js" scroll="no" style="overflow:hidden">
<div id='test6' code='com.ui.panel' option='{"align":"alTop","height":"60","width":"200","borderWidth":1,"padding":1}'>
<div id='test8' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test3.ico"}'>确定</div>
<div id='test9' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test2.ico"}'>取消</div>
<div id='test10' code='com.ui.toolButton' option='{"height":"60","width":"60","type":"split"}'></div>
<div id='test11' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test1.ico"}'>退出</div>
</div>
<div id='test1' code='com.ui.panel' option='{"align":"alTop","height":"40","width":"200","borderWidth":1,"padding":1}'></div>
<div id='test4' code='com.ui.panel' option='{"align":"alBottom","height":"50","width":"200","borderWidth":1,"padding":1}'>
<div id='test2' code='com.ui.button' option='{"height":"25","width":"100","top":"12","right":"116"}'></div>
<div id='test3' code='com.ui.button' option='{"height":"25","width":"100","top":"12","right":"8"}'></div>
</div>
<div id='test7' code='com.ui.panel' option='{"align":"alLeft","height":"100","width":"200","borderWidth":1,"padding":1}'></div>
<div id='test5' code='com.ui.panel' option='{"align":"alClient","height":"100","width":"200","borderWidth":1,"padding":1}'></div>
</body>
</html>
其中test.html文件目录下添加image文件夹，并把图标放在文件夹下面，
效果如上图，
可直接下载附件查看源码。
请关注下一篇， javascript控件开发之流动条控件
javascript控件开发之工具栏控件,布布扣,bubuko.com
标签：javascript web 控件 js 框架
原文地址：http://blog.csdn.net/qinzhenzhou/article/details/33302315
