复制代码 代码如下:
//处理页面异常
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 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 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 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);
}
}