上一篇我们写完了可见窗口的基础控件，本篇我们来实现一个简单的按钮控件，虽然这个控件<input>类似，但是自定义的空间却无限的大，首先我们在component\ui\目录下添加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控件开发之页面控制器
分享到：
相关推荐
在这个主题中，“javascript控件开发之继承关系”主要探讨的是如何利用JavaScript的面向对象特性来构建和组织控件的层次结构，以及如何通过继承来实现代码的复用和模块化。 在JavaScript中，继承是基于原型...
在JavaScript控件开发中，"可见控件"是构建用户界面UI的重要组成部分。这些控件是用户与应用程序交互的桥梁，比如按钮、文本框、下拉列表等。本篇文章将聚焦于可见控件的渲染基类，这是创建自定义、高级控件的基础。...
JavaScript控件开发是Web应用程序中不可或缺的一部分，它允许开发者创建具有特定功能和交互性的用户界面元素。本篇文章将深入探讨JavaScript控件开发的基础知识，帮助初学者了解如何创建自己的控件，并提供一个实际...
在“javascript控件开发之可见控件(2)”这个主题中，我们将深入探讨如何在JavaScript中构建可控制其可见性的控件，并且在上一篇的基础上，通过添加事件相关函数来增强控件的灵活性和可扩展性。 首先，我们需要理解...
JavaScript控件开发是Web开发中的重要一环，特别是在构建交互丰富的网页应用时。布局控件是其中的关键元素，它允许开发者有效地组织和管理页面上的元素，实现多控件的协调和共存。在这个主题中，我们将深入探讨...
JavaScript控件开发是一种常见的Web应用开发技术，它允许开发者创建交互性强、功能丰富的用户界面元素。动态加载作为JavaScript控件开发中的一个重要概念，是提升网页性能和用户体验的关键手段。动态加载意味着控件...
在JavaScript控件开发中，工具栏控件是一个关键的元素，它通常被用来提供用户界面中的功能快捷方式或操作选项。工具栏控件的设计和实现是网页交互性的重要组成部分，尤其是在构建富客户端应用或者增强用户体验的网页...
JavaScript控件是网页开发中常用的一种元素，它们用于增强用户界面的交互性和功能。JavaScript是一种轻量级的脚本语言，常被嵌入HTML页面中，以实现动态内容的生成和用户交互。在这个主题中，我们将深入探讨...
在JavaScript控件开发中，渲染对象是一个至关重要的概念，它涉及到如何将数据转换为用户界面可见的元素。本文将深入探讨渲染对象的概念、工作原理以及如何在实际开发中使用它们。 渲染对象通常指的是在JavaScript中...
在给定的文件中，我们看到了一个通过JavaScript技术实现按钮添加控件的示例。这段代码展示了一个网页应用，其中包含一个按钮，当点击该按钮时，会动态地在页面上添加一个新的输入文本框（控件）以及一个删除链接。这...
JavaScript控件，通常简称为JS控件，是Web开发中常用的一种技术，它利用JavaScript语言来实现用户界面的交互和动态功能。JavaScript控件能够增强网页的用户体验，提供丰富的图形界面，以及各种用户输入和数据处理...
JavaScript密码输入控件是网页开发中常见的一种交互元素，它用于收集用户的安全信息，如登录密码、PIN码等。在Web应用中，正确地实现密码输入控件对于提高用户体验和保障数据安全至关重要。本文将深入探讨JavaScript...
日历JavaScript控件在网页开发中广泛使用，主要功能是为用户提供直观的日期选择界面，增强用户体验。本文将深入探讨“Calendar日历JavaScript控件”的特点、使用方法及其实现原理。 首先，"Calendar日历JavaScript...
在编程和软件开发中，理解和使用旋转按钮控件是非常重要的技能。 旋转按钮控件，又称为旋钮或轮盘，它的设计目标是提供一种直观且易于操作的方式，使用户能够快速改变设置。在Windows操作系统中，它通常被称为...
VC++ ActiveX控件开发是Windows应用程序开发中的一个重要部分，主要涉及的是利用Microsoft Visual C++这一集成开发环境（IDE）创建能够嵌入到其他应用程序、网页或者Active Desktop中的控件。ActiveX技术允许开发者...
在网页开发中，FileUpload 控件是用户上传文件时常用的一个功能。默认情况下，当我们在HTML中使用`<input type="file">`来创建一个文件选择器时，浏览器通常会显示一个默认样式的“浏览”按钮，用于打开文件选择...
- **事件触发**：OCX控件可以触发事件，如按钮点击、数据改变等，JavaScript可以通过监听这些事件进行响应。 - **调用示例**：例如，一个名为"MyControl"的OCX控件，其有一个方法`DoSomething()`，在JavaScript中...