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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
Javascript Web Worker使用过程解析
Mar 16 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 加密与解密的斗争
2009/04/17 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
Vue学习之常用指令实例详解
2020/01/06 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python使用列表的最佳方案
2020/08/12 Python
Python 求向量的余弦值操作
2021/03/04 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
校领导推荐信
2013/11/01 职场文书
毕业学生推荐信
2013/12/01 职场文书
超市5.1促销活动
2014/01/15 职场文书
军训自我鉴定范文
2014/02/13 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Python学习之os包使用教程详解
2022/03/21 Python