javascript控件开发之工具栏控件

于 2014-06-10 23:30:41 发布
阅读量495 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 控件开发 文章标签： javascript 控件开发 前端框架 js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_20428/article/details/82582198
本文档介绍如何开发JavaScript工具栏控件，主要包括toolBar、toolButton和分隔符控件。控件实现基于前文的Panel控件，toolButton控件包含图标和文字。在com.ui.toolButton.js中定义控件类，通过不同type属性区分split和button渲染。按钮控件处理鼠标事件、大小调整及文字修改。示例代码在test.html中展示，包括图片资源。下一篇文章将讨论流动条控件的开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，
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文件夹，并把图标放在文件夹下面，
[img]http://dl2.iteye.com/upload/attachment/0097/9888/4f5c5488-8360-3dd3-83de-c94f2e7130a2.jpg[/img]
效果如上图，
可直接下载附件查看源码。
请关注下一篇， javascript控件开发之流动条控件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值