javascript控件开发之按钮控件

48 阅读 0 评论 32 点赞

我是靠谱客的博主失眠酒窝，最近开发中收集的这篇文章主要介绍 javascript控件开发之按钮控件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

　　上一篇我们写完了可见窗口的基础控件，本篇我们来实现一个简单的按钮控件，虽然这个控件<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>

通过前期的框架，该篇相当的简单，实现思路也很清析，
大家可以直接下附件运行测试
请关注下一篇，javascript控件开发之页面控制器