Una capa que se cerrará automáticamente dentro de un cierto período de tiempo.

Autor：Eve Cole Fecha de actualización：2009-06-20 15:33:18

<html> <head> </head> <script language="javascript"> function PageLoad() { /*var myMenu = new MainMenu('menu','test.xml'); var myMenu = new MainMenu('menú'); var menuFile = new MenuItem('Archivo','Archivo',null,'F'); var menuSave = new MenuItem('Guardar','Guardar','document.execCommand ("Guardar como")','S'); var menuExit = new MenuItem('Salir','Salir','Salir()','X'); var menuEdit = nuevo MenuItem('Editar','Editar'); ,null,'E'); var menuView = new MenuItem('View','View',null,'V'); var menuProg = new MenuItem('Prog','Inicializado a través del script del programa','SelectOpt(this) )'); var menuConf = new MenuItem('Conf','Inicializado a través del archivo de configuración','SelectOpt(this)'); var menuChk = new MenuItem('Chk','Prueba: múltiples opciones'); new MenuItem('Chk1','Prueba: Verificar opción 1','CheckOpt(this)'); var menuChk2 = new MenuItem('Chk1','Prueba: Verificar opción 2','CheckOpt(this)'); menuHelp = new MenuItem('Ayuda','Ayuda',null,'H'); var menuTopics = new MenuItem('Temas','Ayuda',null,'T'); ','Contenido de ayuda',null,'C'); var menuAbout = new MenuItem('Acerca de','Acerca de MenuItem','alert("MenuItem Ver1.00 por Akira(akira_cn@msn.com)")', 'A'); menuFile.addChild(menuSave); menuFile.addChild(menuExit); menuView.addChild(menuProg); menuView.addChild(menuConf); menuChk.addChild(menuChk1); menuChk.addChild(menuChk2); menuHelp.addChild(menuAbout); myMenu.addItem(menuFile); addItem(menuEdit); myMenu.addItem(menuView); myMenu.addItem(menuAyuda(); menuEdit.Disable(); menuContent.Disable(); menuChk1; .Check(); } función contacto() { alerta('Contáctenos'); } función Salir() { self.opener = self.close() } función SelectOpt(destino) { var editBox1 = document.getElementById ('editBox1'); var editBox2 = document.getElementById('editBox2'); if (target.id == 'Conf') { editBox1.style.display = "none"; editBox2.style.display = "bloque"; } else { editBox2.style.display = "none"; editBox1.style.display = "bloque"; } target.Select(); función CheckOpt(target) { target.Check(); style='padding:0 0 0 0;margin:0 0 0 0' onload='PageLoad()'> <textarea id="editBox1" style="width:100%;height:90%"> Inicializar la página principal a través del ejemplo del menú del programa: <script> var myMenu = new MainMenu('menu' var menuFile = new MenuItem('File','File',null,'F'); ' Guardar','document.execCommand('Guardar como')','S'); var menuExit = new MenuItem('Salir','Salir','Salir()','var menuEdit = nuevo MenuItem); ('Editar','Editar',null,'E'); var menuView = new MenuItem('Ver','Ver',null,'V'); script Inicializar','SelectOpt(this)'); var menuConf = new MenuItem('Conf','Inicializar a través del archivo de configuración','SelectOpt(this)'); var menuChk1 = new MenuItem('Chk1','Test: Opción compleja 1','CheckOpt(this)'); var menuChk2 = new MenuItem('Chk1','Prueba: Verificar opción 2','CheckOpt(this)'); var menuHelp = new MenuItem('Ayuda','); Ayuda ',null,'H'); var menuTopics = new MenuItem('Temas','Tema de ayuda',null,'T'); var menuContent = new MenuItem('Contenido','Contenido de ayuda',null,' C '); var menuAbout = new MenuItem ('Acerca de','AboutMenuItem','alert('MenuItem Ver1.00 por Akira(akira_cn@msn.com)')','A'); ; myMenu.addItem(menuEdit); myMenu.addItem(menuView); myMenu.addItem(menuHelp); menuFile.addChild(menuConf); menuView.addLine(); //Filas separadas menuView.addChild(menuChk1); menuHelp.addChild(menuChk2); menuHelp.addChild(menuAboug) ; myMenu.Show(); menuEdit.Disable(); menuTopics.Disable(); menuContent.Disable(); menuProg.Select(); editBox2" style="width:100%;height:90%;display:none"> Ejemplo de inicialización del menú principal a través de un archivo de configuración:  <script language="javascript"> función MenuItem(id, texto, clickEvent, acelerador, subWidth) { this.id = null; this.accelerator = null; if (id == null) { this.id = "menú" + (nueva fecha()).getTime() } else this.id = this.text = text; .subWidth = 0; for (var i = 0; this.text != null && i < this.text.length; i++) { this.subWidth = this.subWidth - 0 + (text.charCodeAt(i) > 127 ? 20: 10); } //this.subWidth = this.text!= null? this.text.length * 16: 96;//100; else this.subWidth = subWidth; onclick = function(){}; else this.onclick = function(){eval(clickEvent);}; if (acelerador! = nulo) // Tecla de acceso directo { this.accelerator = accelerator } this.subMenuItems = new Array ( ); this.visible = true; this.disabled = false; this.checked = false; this.span.style.display = false; "ninguno"; } MenuItem.prototype.Show = función() { this.visible = true; this._span.style.display = "bloque" } MenuItem.prototype.Enable = function() { this.disabled = false; this._span.EventHandler = this; this._span.onmouseover = function(){this.EventHandler._span_MouseOver(this,evento);} this._span.onmouseout = function(){this.EventHandler._span_MouseOut(this,evento) );} this._span.onclick = function(){this.EventHandler._span_Click(this,event);} this._span.style.color = "#000000" } MenuItem.prototype.Disable = function() { esto; .disabled = true; this._span.onmouseover = function(){} this._span.onmouseout = function(){} this._span.onclick = function(){} this._span.style.color = "#ACA899" ; } MenuItem.prototype.Check = function() { if (!this.checked) { var textObj = document.createElement('b'); textObj.innerText = '√'; (var i = 0; i < this._span.childNodes.length - 1; i++) { this._span.appendChild(this._span.removeChild(this._span.childNodes[i]) } this.checked = true); ; this._span.style.paddingLeft = "6px"; } else { this._span.removeChild(this._span.childNodes[0]); this.checked = false; } } MenuItem.prototype.Select = function() { var parent = this.parent; for (var i = 0; i < parent.subMenuItems.length; i++) { parent.subMenuItems[i]._unselect() } var liObj = document.createElement("li"); this._span.appendChild(liObj); para (var i = 0; i < this._span.childNodes.length - 1; i++) { liObj.appendChild(this._span. removeChild(this._span.childNodes[i])); } this.selected = true; //this.subWidth = this.subWidth - 0 + 16; ._unselect = function() { if (this.selected) { var liObj = this._span.removeChild(this._span.childNodes[0]); para (var i = 0; i < liObj.childNodes.length; i++) { this._span.appendChild(liObj.childNodes[i]); } this.selected = false; this._span.style.paddingLeft = "18px"; //this.subWidth = this.subWidth - 16; prototipo.addChild = función(menuItem) { this.subMenuItems.push(menuItem); menuItem.parent = esto; } MenuItem.prototype.addLine = función() { this.addChild(new MenuItem() } MenuItem.prototype. hasChild = function() { return this.subMenuItems.length > 0; this._span = document.createElement("span"); this._span.id = this._span.style.cursor = "predeterminado" ; si (this.text == null) { this._span.appendChild(document.createElement("hr")); this._span.style.height = "2px"; ; this._span.style.marginBottom = "2px"; } else { if (acelerador! = nulo) { var sitio = text.indexOf (acelerador); if (sitio! = -1) { var part1 = text.slice( 0, sitio); var part2 = text.slice(sitio + 1); var textNode1 = document.createTextNode(part1); var textNode2 = document.createTextNode(part2); .style.textDecoration = "subrayado"; node.innerText = acelerador; this._span.appendChild(textNode1); this._span.appendChild(nodo); this._span.appendChild(textNode2); createTextNode(texto + "("); var nodo = document.createElement("font"); node.style.textDecoration = "subrayado"; node.innerText = acelerador; this._span.appendChild(textNode); this._span. appendChild(nodo); this._span.appendChild(document.createTextNode(")")); this.subWidth = this.subWidth - 0 + 48; else { var textNode = document.createTextNode(texto); .appendChild(textNode); } this._span.style.height = "20px"; this._span.style.marginTop = "2px"; this._span.style.marginBottom = "2px"; = "12px"; this._span.style.paddingTop = "5px"; this._span.style.paddingLeft = "18px"; this._span.style.paddingRight = "10px"; ._span.onmouseover = function(){this.EventHandler._span_MouseOver(this,event);} this._span.onmouseout = function(){this.EventHandler._span_MouseOut(this,event);} this._span.onclick = función (){this.EventHandler._span_Click(this,event);} } if (acelerador != null) { this.accelerator = accelerator.charCodeAt(0 } MenuItem.prototype.ShowSubmenu = function() { var pos = this); .getObjPosition(); var subSpan = document.createElement("span"); subSpan.style.position = "absoluto"; if(this.parent instanciade MainMenu) { subSpan.style.left = pos[0]; .top = pos[1] + this._span.clientHeight; } else { subSpan.style.left = pos[0] + this._span.clientWidth + 1; subSpan.style.top = pos[1]; style.paddingLeft = "0px"; subSpan.style.width = 0; subSpan.style.backgroundColor = "#FFFFFF"; subSpan.style.border = "sólido 1px #ACA899"; ; subSpan.className = "subMenu"; subSpan.owner = this.id; //this._span.onmouseout = function(){}; para (var i = 0; i < this.subMenuItems.length; i++) { esto .subMenuItems[i]._span.style.marginTop = 0; this.subMenuItems[i]._span.style.marginBottom = 0; this.subMenuItems[i]._span.style.width = "100%"; .subWidth < this.subMenuItems[i].subWidth) { this.subWidth = this.subMenuItems[i].subWidth; } subSpan.appendChild(this.subMenuItems[i]._span } subSpan.style.width = this. subWidth > 96 ? this.subWidth : 96; //this._span.appendChild(subSpan); document.body.appendChild(subSpan); document.body.focus(); ) { if (!this.hasChild() || this.clickEvent) { this.hideSubmenu(true); this.onclick() } else { if(this.hasChild()) { this.ShowSubmenu(); parent._showSub = true; } } if (event.stopPropagation) event.stopProgpagation(); else event.cancelBubble = true } MenuItem.prototype._span_MouseOver = function(remitente, evento) { this.hideSubmenu(); (remitente); if(this.hasChild() && (this.parent._showSub || this.parent instanciade MenuItem)) { this.ShowSubmenu() } } MenuItem._span_MouseOut = función (remitente, evento) { esto; ._cleanMenu(remitente); //this.hideSubmenu(); } MenuItem.prototype._activeMenu = function(menuSpan) { menuSpan.style.backgroundColor = "#316AC5"; menuSpan.style.color = "#FFFFFF"; .prototype._cleanMenu = function(menuSpan) { if (menuSpan.parentNode.className == "subMenu") menuSpan.style.backgroundColor = "#FFFFFF"; else menuSpan.style.backgroundColor = "#F1EEE5"; color = "#000000"; } MenuItem.prototype.hideSubmenu = function(bHideAll) { var subMenus = document.getElementsByTagName("span"); for (var i = subMenus.length - 1; i >= 0; i-- ) { if (subMenus[i].className == "subMenu" && (bHideAll || !this.isParentOf(subMenus[i].owner))) { if (bHideAll) { var parent = this.parent mientras (parent; != null) { parent._showSub = false; parent = parent.parent; } } this._cleanMenu(this._span); subMenus[i].parentNode.removeChild(subMenus[i]); isParentOf = function(propietario) { var parent = this.parent; while(parent!= null) { if (propietario == parent.id) return true; parent = parent.parent } return false } //Obtener el objeto coordenadas MenuItem.prototype.getObjPosition = function() { var obj = this._span; var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop] } MenuItem.Instances[this.id] = this; (esto); if (document.body.onkeydown == null) { document.body.onkeydown = function() { for (var i = 0; i < MenuItem.Instances.All.length; i++) { if (MenuItem. Instancias .All[i].accelerator != null) { if (event.altKey && event.keyCode == MenuItem.Instances.All[i].accelerator) { MenuItem.Instances.All[i]._span_Click.call(MenuItem Instancias.Todos[i],MenuItem.Instances.All[i]._span,event Instancias.Todos[0].hideSubmenu(true); } } } MenuItem.Instances = new Array(); MenuItem.Instances.All = new Array(); (); this.parent = null; this.id = id; MainMenu.prototype._loadCfg = function(src) // Leer del archivo de configuración { try { var objXMLDoc = new ActiveXObject("Microsoft.XMLDOM"); async = false; objXMLDoc.load(src); if (objXMLDoc.documentElement == null) throw new TypeError("¡Falló el análisis del documento XML! "); return objXMLDoc; } catch(e) { alert("¡Error en el análisis del documento XML!"); throw new TypeError("¡Error en el análisis del documento XML!"); } } MainMenu.prototype._applyCfg = function(element, menuItem) { var id = element.getAttribute("id"); var texto = element.getAttribute("Texto"); var onClick = element.getAttribute("onClick"); subMenuItem = new MenuItem(id,text,onClick,Accelerator); if(menuItem!= null) menuItem.addChild(subMenuItem); else this.addItem(subMenuItem) para (var i = 0; i < element.childNodes.length); ; i++) { if (element.childNodes[i].tagName == "MenuItem") { this._applyCfg(element.childNodes[i], subMenuItem) { var); cfgElements = xmlDoc.getElementsByTagName("MenuItem"); para (var i = 0; i < cfgElements.length; i++) { var elemento = cfgElements[i]; element.getAttribute("Comprobado"); var seleccionado = element.getAttribute("Seleccionado"); var visible = element.getAttribute("Visible"); var desactivado = element.getAttribute("Desactivado"); nulo) { continuar } if (marcado == "verdadero") { MenuItem.Instances[id].Check() } if (seleccionado == "true") { MenuItem.Instances[id].Select(); if (visible == "falso") { MenuItem.Instances[id].Hide() } if (disabled == "true") { MenuItem.Instances[id].Disable(); menuItem = function(id) { return this._find(id, this.items } MainMenu.prototype._find = function(id, items) { for (var i = 0; i < items.length; i++) { if (elementos[i].id == id) { devolver elementos[i]; si (elementos[i].subMenuItems.length > 0) { this._find(id, elementos[i].subMenuItems } } devolver); null } MainMenu.prototype.addItem = function(menuItem) { this.items.push(menuItem); menuItem.parent = this } MainMenu.prototype.removeItem = function(id) { return this._delete(id, this. artículos } MainMenu.prototype._delete = function(id, items) { for (var i = 0; i < items.length; i++) { if (items[i].id == id) { var item = items); [i]; items.splice(i); devolver elemento; } if (items[i].subMenuItems.length > 0) { this.find(id, items[i].subMenuItems); ._div = document.createElement("div"); this._div.id = this.id; this._div.style.height = "24px"; this._div.style.backgroundColor = "#F1EEE5"; .body.appendChild(this._div); if(cfgSrc != null) { var objXMLDoc = this._loadCfg(cfgSrc); var rootElement = objXMLDoc.documentElement if(rootElement.tagName != "MainMenu") { alerta(" ¡El documento XML no es un archivo de configuración del menú principal legal! (El nombre de la etiqueta del elemento raíz no es MainMenu)"); throw new TypeError("¡El documento XML no es un archivo de configuración del menú principal legal! (El nombre de la etiqueta del elemento raíz no es MainMenu)"); } for ( var i = 0; i < rootElement .childNodes.length; i++) { if (rootElement.childNodes[i].tagName == "MenuItem") { this._applyCfg(rootElement.childNodes[i]); (objXMLDoc); } MainMenu.prototype .Show = function() { document.body.appendChild(this._div); para (var i = 0; i < document.body.childNodes.length; i++) { if(document. body.childNodes[i].id != this.id) { document.body.appendChild(document.body.removeChild(document.body.childNodes[i])} for (var i = 0; i < this) .items.length; i++) { this._div.appendChild(this.items[i]._span);