Home > Web Front-end > JS Tutorial > body text

window.js mainly contains some operations on the page_javascript skills

WBOY
Release: 2016-05-16 18:38:31
Original
728 people have browsed it
Copy code The code is as follows:

//Handling page exceptions
function Exception() {
}

//Common interface of page elements
function View() {
//Page elements
this.element = null;
//Text color
this.color = null;

//Set style
this.setStyle = function(name, value) {
eval("this.element.style." name " = '" value "'");
}
//Get 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);
}
/ /Get 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 object width
this.setHeight = function(height) {
this.setStyle("height", height);
}
//Set page positioning
this.setPosition = function(position) {
this.setStyle("position", position );
}
//Set layer
this.setZIndex = function(zIndex) {
this.setStyle("zIndex", zIndex);
}
//Left distance
this.setLeft = function(left) {
this.setStyle("left", left);
}
//Distance from top
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);
}
//Mouse move into object event
this.onmouseenterListener = function(exec) {
this.eventListener("onmouseenter", exec);
}
//Mouse out object event
this.onmouseleaveListener = function(exec) {
this. eventListener("onmouseleave", exec);
}
//Mouse click object event
this.onclickListener = function(exec) {
this.eventListener("onclick", exec);
}
}

//Single element
function Single() {
View.call(this);
}
//Can have child elements
function Multi() {
View.call(this);
//Collection of child elements
this.childElementList = new Array();
//Add child elements
this.addView = function(childElement) {
if(this.element == null) {
//Exception information to be added
return;
}
this.childElementList[this.childElementList.length] = childElement;
}
//Associated child element
this.appendChildElement = function(childElement) {
this.element.appendChild(childElement.element);
}
// Show 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 page element
this.element = document.body;
}
//Line 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 ); );
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);
}
}
Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!