javascript控件开发教程之按钮控件

发布时间:2020-03-18编辑:脚本学堂
本文介绍了javascript控件开发中按钮控件的实现方法,有关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> 

 通过前期的框架,该篇相当的简单,实现思路也很清析。