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(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
tsconfig.json配置详解
May 17 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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编写的导航条程序
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
学习ExtJS Column布局
2009/10/08 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python简单实现AES加密和解密
2019/03/28 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
学生鉴定评语大全
2014/05/05 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Python 键盘事件详解
2021/11/11 Python