window.js 主要包含了页面的一些操作


Posted in Javascript onDecember 23, 2009
//处理页面异常 
function Exception() { 
} //页面元素共同接口 
function View() { 
//页面元素 
this.element = null; 
//文字颜色 
this.color = null; 
//设置样式 
this.setStyle = function(name, value) { 
eval("this.element.style." + name + " = '" + value + "'"); 
} 
//获取样式 
this.getStyle = function(name) { 
return eval("this.element.style." + name); 
} 
//设置浮动样式 
this.setFloat = function(styleFloat) { 
this.setStyle("styleFloat", styleFloat); 
} 
//设置背景色 
this.setBackgroundColor = function(backgroundColor) { 
this.setStyle("backgroundColor", backgroundColor); 
} 
//获取背景色 
this.getBackgroundColor = function() { 
return this.getStyle("backgroundColor"); 
} 
//设置对象宽度 
this.setWidth = function(width) { 
//alert(width); 
this.setStyle("width", width); 
} 
//设置对象宽度 
this.setHeight = function(height) { 
this.setStyle("height", height); 
} 
//设置页面定位 
this.setPosition = function(position) { 
this.setStyle("position", position); 
} 
//设置层 
this.setZIndex = function(zIndex) { 
this.setStyle("zIndex", zIndex); 
} 
//左边距离 
this.setLeft = function(left) { 
this.setStyle("left", left); 
} 
//上边距离 
this.setTop = function(top) { 
this.setStyle("top", top); 
} 
//是否换行 
this.setWhiteSpace = function(whiteSpace) { 
this.setStyle("whiteSpace", whiteSpace); 
} 
this.setMargin = function(margin) { 
this.setStyle("margin", margin); 
} 
this.setPadding = function(padding) { 
this.setStyle("padding", padding); 
} 
//设置属性 
this.setAttributeIsHave = function(attrName, value) { 
eval("this.element.setAttribute('" + attrName + "', '" + value + "')"); 
} 
this.setId = function(id) { 
this.setAttributeIsHave("id", id); 
} 
this.setInnerText = function(innertext) { 
this.setAttributeIsHave("innerText", innertext); 
} 
//加入自定义属性 
this.setAttributeIsNot = function(attrName, value) { 
var attr = document.createAttribute(attrName); 
attr.value = value; 
this.element.setAttributeNode(attr); 
} 
//事件监听 
this.eventListener = function(eventName, exec) { 
this.element.attachEvent(eventName, exec); 
} 
//鼠标移入对象事件 
this.onmouseenterListener = function(exec) { 
this.eventListener("onmouseenter", exec); 
} 
//鼠标移出对象事件 
this.onmouseleaveListener = function(exec) { 
this.eventListener("onmouseleave", exec); 
} 
//鼠标单击对象事件 
this.onclickListener = function(exec) { 
this.eventListener("onclick", exec); 
} 
} 
//单一元素 
function Single() { 
View.call(this); 
} 
//可以有子元素 
function Multi() { 
View.call(this); 
//子元素集合 
this.childElementList = new Array(); 
//加入子元素 
this.addView = function(childElement) { 
if(this.element == null) { 
//待加入异常信息 
return; 
} 
this.childElementList[this.childElementList.length] = childElement; 
} 
//关联子元素 
this.appendChildElement = function(childElement) { 
this.element.appendChild(childElement.element); 
} 
//显示元素 
this.show = function() { 
for(var i = 0; i < this.childElementList.length; i++) { 
var childElement = this.childElementList[i]; 
this.appendChildElement(childElement); 
childElement.show(); 
} 
} 
} 
//面板 
function Panel() { 
Multi.call(this); 
//创建页面元素 
this.element = document.body; 
} 
//行布局 
function LineLayout() { 
Multi.call(this); 
this.element = document.createElement("div"); 
} 
//左布局 
function LeftLayout() { 
Multi.call(this); 
this.element = document.createElement("div"); 
this.setFloat("left"); 
} 
//右布局 
function RightLayout() { 
Multi.call(this); 
this.element = document.createElement("div"); 
this.setFloat("right"); 
} 
function Menu() { 
Multi.call(this); 
this.element = document.createElement("div"); 
this.setWidth("100%"); 
var clickListener = function() { 
return; 
}; 
var moveInBackgroundColor = "red"; 
var moveOutBackgroundColor = this.getBackgroundColor(); 
this.show = function() { 
var menuItem = null; 
var menuEntiy = null; 
for(var i = 0; i < this.childElementList.length; i++) { 
menuItem = new MenuItem(); 
menuEntiy = this.childElementList[i]; 
menuItem.addMenuEntity(menuEntiy); 
menuItem.onmouseenterListener(moveInMenuItem); 
menuItem.onmouseleaveListener(moveOutMenuItem); 
menuItem.onclickListener(this.clickMenuItem ); 
menuItem.setPadding("0 5px 0 5px"); 
this.appendChildElement(menuItem); 
} 
} 
this.setClickListener = function(exec) { 
clickListener = exec; 
} 
function moveInMenuItem() { 
event.srcElement.style.backgroundColor = moveInBackgroundColor; 
} 
function moveOutMenuItem() { 
event.srcElement.style.backgroundColor = moveOutBackgroundColor; 
} 
this.clickMenuItem = function() { 
var child = clickListener(); 
document.body.appendChild(child.element); 
child.setLeft(event.srcElement.offsetLeft); 
child.setTop(event.srcElement.offsetParent.offsetTop + event.srcElement.clientHeight); 
child.show(); 
} 
} 
function ChildMenu() { 
Multi.call(this); 
this.element = document.createElement("div"); 
this.setPosition("absolute"); 
this.setZIndex(100); 
this.setBackgroundColor("#ccffcc"); 
var moveInBackgroundColor = "red"; 
var moveOutBackgroundColor = this.getBackgroundColor(); 
this.show = function() { 
var menuItem = null; 
var menuEntiy = null; 
for(var i = 0; i < this.childElementList.length; i++) { 
menuItem = new MenuItem(); 
menuItem.setFloat("none"); 
menuEntiy = this.childElementList[i]; 
menuItem.addMenuEntity(menuEntiy); 
menuItem.onmouseenterListener(moveInMenuItem); 
menuItem.onmouseleaveListener(moveOutMenuItem); 
//menuItem.onclickListener(clickMenuItem); 
menuItem.setPadding("0 5px 0 15px"); 
this.appendChildElement(menuItem); 
} 
} 
function moveInMenuItem() { 
event.srcElement.style.backgroundColor = moveInBackgroundColor; 
} 
function moveOutMenuItem() { 
event.srcElement.style.backgroundColor = moveOutBackgroundColor; 
} 
} 
function MenuEntiy(id, name, action) { 
this.id = id; 
this.name = name ; 
this.action = action; 
} 
function MenuItem() { 
Single.call(this); 
this.element = document.createElement("div"); 
this.setFloat("left"); 
this.setWhiteSpace("nowrap"); 
this.addMenuEntity = function(menuEntity) { 
this.setId(menuEntity.id); 
this.setInnerText(menuEntity.name); 
this.setAttributeIsNot("action", menuEntity.action); 
} 
}
Javascript 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
安装vue-cli的简易过程
May 22 Javascript
详解javascript replace高级用法
Feb 17 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
js 效率组装字符串 StringBuffer
Dec 23 #Javascript
jquery 表单取值常用代码
Dec 22 #Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 #Javascript
JavaScript 图片预览效果 推荐
Dec 22 #Javascript
javascript 年月日联动实现核心代码
Dec 21 #Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 #Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 #Javascript
You might like
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php xml 入门学习资料
2011/01/01 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python编写微信公众号首图思路详解
2019/12/13 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
岗位职责定义及内容
2013/11/08 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
公司募捐倡议书
2014/05/14 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2015小学师德工作总结
2015/07/21 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers