Copy codeThe Code is as follows:
// Handle page exceptions
Function Exception (){
}
// Common interface of page elements
Function View (){
// Page Element
This. element = null;
// Text color
This. color = null;
// Set the style
This. setStyle = function (name, value ){
Eval ("this. element. style." + name + "= '" + value + "'");
}
// Obtain the style
This. getStyle = function (name ){
Return eval ("this. element. style." + name );
}
// Set floating Style
This. setFloat = function (styleFloat ){
This. setStyle ("styleFloat", styleFloat );
}
// Set the background color
This. setBackgroundColor = function (backgroundColor ){
This. setStyle ("backgroundColor", backgroundColor );
}
// Obtain the background color
This. getBackgroundColor = function (){
Return this. getStyle ("backgroundColor ");
}
// Set the object width
This. setWidth = function (width ){
// Alert (width );
This. setStyle ("width", width );
}
// Set the object width
This. setHeight = function (height ){
This. setStyle ("height", height );
}
// Set page Positioning
This. setPosition = function (position ){
This. setStyle ("position", position );
}
// Set the Layer
This. setZIndex = function (zIndex ){
This. setStyle ("zIndex", zIndex );
}
// Left distance
This. setLeft = function (left ){
This. setStyle ("left", left );
}
// Distance above
This. setTop = function (top ){
This. setStyle ("top", top );
}
// Whether to wrap the line
This. setWhiteSpace = function (whiteSpace ){
This. setStyle ("whiteSpace", whiteSpace );
}
This. setMargin = function (margin ){
This. setStyle ("margin", margin );
}
This. setPadding = function (padding ){
This. setStyle ("padding", padding );
}
// Set attributes
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 );
}
// Add Custom Attributes
This. setAttributeIsNot = function (attrName, value ){
Var attr = document. createAttribute (attrName );
Attr. value = value;
This. element. setAttributeNode (attr );
}
// Event listening
This. eventListener = function (eventName, exec ){
This. element. attachEvent (eventName, exec );
}
// Move the cursor to the object event
This. onmouseenterListener = function (exec ){
This. eventListener ("onmouseenter", exec );
}
// Move the cursor out of an object event
This. onmouseleaveListener = function (exec ){
This. eventListener ("onmouseleave", exec );
}
// Click the object event
This. onclickListener = function (exec ){
This. eventListener ("onclick", exec );
}
}
// Single element
Function Single (){
View. call (this );
}
// Sub-elements can exist.
Function Multi (){
View. call (this );
// Child Element Set
This. childElementList = new Array ();
// Add sub-elements
This. addView = function (childElement ){
If (this. element = null ){
// Exception information to be added
Return;
}
This. childElementList [this. childElementList. length] = childElement;
}
// Associate the child element
This. appendChildElement = function (childElement ){
This. element. appendChild (childElement. element );
}
// Display element
This. show = function (){
For (var I = 0; I <this. childElementList. length; I ++ ){
Var childElement = this. childElementList [I];
This. appendChildElement (childElement );
ChildElement. show ();
}
}
}
// Panel
Function Panel (){
Multi. call (this );
// Create a page Element
This. element = document. body;
}
// Row Layout
Function LineLayout (){
Multi. call (this );
This. element = document. createElement ("div ");
}
// Left Layout
Function LeftLayout (){
Multi. call (this );
This. element = document. createElement ("div ");
This. setFloat ("left ");
}
// Right Layout
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 );
}
}