Слой, который автоматически закроется через определенный период времени.

Автор：Eve Cole Время обновления：2009-06-20 15:33:18

<html> <head> </head> <script Language="javascript"> function PageLoad() { /*var myMenu = new MainMenu('menu','test.xml'); myMenu.Show();*/ вар myMenu = новый MainMenu('меню'); вар MenuFile = новый MenuItem('Файл','Файл',ноль,'F'); вар MenuSave = новый MenuItem('Сохранить','Сохранить','document.execCommand ("SaveAs")','S'); var MenuExit = новый MenuItem('Exit','Exit','Exit()','X'); var MenuEdit = new MenuItem('Edit','Edit'); ,null,'E'); var MenuView = new MenuItem('View','View',null,'V'); var MenuProg = new MenuItem('Prog','Инициализируется через программный скрипт','SelectOpt(this )'); var menuConf = new MenuItem('Conf','Инициализируется через файл конфигурации','SelectOpt(this)'); var menuChk = new MenuItem('Chk','Test: несколько вариантов'); new MenuItem('Chk1','Test: Проверить вариант 1','CheckOpt(this)'); var MenuChk2 = new MenuItem('Chk1','Test: Проверить вариант 2','CheckOpt(this)'); MenuHelp = новый MenuItem('Справка','Справка',null,'H'); var MenuTopics = новый MenuItem('Темы','Тема справки',null,'T'); ','Содержимое справки',null,'C'); var MenuAbout = new MenuItem('О','О MenuItem','alert("MenuItem Ver1.00 от Akira(akira_cn@msn.com)")', 'A');menuFile.addChild(menuSave);menuFile.addChild(menuExit);menuView.addChild(menuConf);menuView.addLine(); //Отдельные строкиmenuView.addChild(menuChk); menuChk.addChild(menuChk1);menuHelp.addChild(menuTopics);menuHelp.addChild(menuContent);menuHelp.addChild(menuAbout);myMenu.addItem(menuFile); addItem(menuEdit); myMenu.addItem(menuHelp); myMenu.Show(); MenuTopics.Disable(); MenuProg.Select(); .Check(); } function contact() { alert('Свяжитесь с нами'); } function Exit() { self.opener = self; self.close() } function SelectOpt(target) { var editBox1 = document.getElementById; ('editBox1'); var editBox2 = document.getElementById('editBox2'); if (target.id == 'Conf') { editBox1.style.display = "none"; } else { editBox2.style.display = "none"; editBox1.style.display = "block"; } target.Select(); } function 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%"> Инициализировать главную страницу через пример меню программы: <script> var myMenu = new MainMenu('menu'); var MenuFile = new MenuItem('File','File',null,'F'); var MenuSave = new MenuItem('Save', 'Сохранить','document.execCommand("Сохранить как")','S'); var MenuExit = новый MenuItem('Выход','Exit','Exit()','X'); var MenuEdit = новый MenuItem ('Редактировать','Редактировать',null,'E'); var MenuView = новый MenuItem('View','View',null,'V'); var MenuProg = новый MenuItem('Prog','через программу script Initialize','SelectOpt(this)'); var MenuConf = new MenuItem('Conf','Инициализировать через файл конфигурации','SelectOpt(this)'); var MenuChk1 = new MenuItem('Chk1','Test: Сложный вариант 1','CheckOpt(this)'); varmenuChk2 = new MenuItem('Chk1','Test: Проверить вариант 2','CheckOpt(this)'); var MenuHelp = new MenuItem('Help',' Help ',null,'H'); var MenuTopics = new MenuItem('Topics','Help Topic',null,'T'); var MenuContent = new MenuItem('Content','Help Content',null,' C '); varmenuAbout = new MenuItem('About','AboutMenuItem','alert('MenuItem Ver1.00 от Akira(akira_cn@msn.com)')','myMenu.addItem(menuFile) ; myMenu.addItem(menuEdit); myMenu.addItem(menuHelp); MenuFile.addChild(menuSave); MenuView.addChild(menuProg); menuView.addLine(); //Отдельные строкиmenuView.addChild(menuChk1);menuHelp.addChild(menuTopics);menuHelp.addChild(menuContent);menuHelp.addLine();menuHelp.addChild(menuAboug) ; myMenu.Show(); MenuTopics.Disable(); MenuProg.Select(); MenuChk1.Check(); </script> </textarea> <textarea id=" editBox2" style="width:100%;height:90%;display:none"> Пример инициализации главного меню через файл конфигурации:  <script Language="javascript"> function MenuItem(id, text, clickEvent, Accelerator, SubWidth) { this.id = null; this.text = null; this.clickEvent = clickEvent; if (id == null) { this.id = "меню" + (new Date()).getTime() } else this.id = id; this.text = text; if (subWidth == null) { this. .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; if (clickEvent == null) this . onclick = function(){}; else this.onclick = function(){eval(clickEvent);}; if (accelerator != null) //Горячая клавиша { this.accelerator = Accelerator; } this.subMenuItems = new Array ( ); this.visible = true; this.disabled = false; this.selected = false; MenuItem.prototype.Hide = function() { this._span.style.display = "нет"; } MenuItem.prototype.Show = function() { this.visible = true; this._span.style.display = "block" } MenuItem.prototype.Enable = function() { this.disabled = false; this._span.EventHandler = this; this._span.onmouseover = function(){this.EventHandler._span_MouseOver(this,event);} this._span.onmouseout = function(){this.EventHandler._span_MouseOut(this,event) );} this._span.onclick = function(){this.EventHandler._span_Click(this,event);} this._span.style.color = "#000000" } MenuItem.prototype.Disable = function() { this .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 = '√'; this._span.appendChild(textObj); (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; this._span.style.paddingLeft = "18px"; } } MenuItem.prototype.Select = function() { varparent = this.parent; for (var i = 0; i <parent.subMenuItems.length; i++) {parent.subMenuItems[i]._unselect(); liObj = document.createElement("li"); this._span.appendChild(liObj); for (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; this._span.style.paddingLeft = "2px"; ._unselect = function() { if (this.selected) { var liObj = this._span.removeChild(this._span.childNodes[0]); for (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; } MenuItem. прототип.addChild = функция (menuItem) { this.subMenuItems.push (menuItem); MenuItem.parent = это; MenuItem.prototype.addLine = функция () { this.addChild (новый MenuItem()); MenuItem.prototype. hasChild = function() { return this.subMenuItems.length > 0 } this._span = document.createElement("span"); this._span.id = this.id; this._span.style.cursor = "default" ; if (this.text == null) { this._span.appendChild(document.createElement("hr")); this._span.style.height = "2px"; this._span.style.marginTop = "2px" ; this._span.style.marginBottom = "2px"; } else { if (accelerator != null) { var site = text.indexOf(accelerator); if (site != -1) { var part1 = text.slice( 0, сайт); var part2 = text.slice(site + 1); var textNode1 = document.createTextNode(part1); var textNode2 = document.createTextNode(part2); var node = document.createElement("font"); .style.textDecoration = "подчеркивание"; node.innerText = акселератор; this._span.appendChild(textNode1); this._span.appendChild(node); this._span.appendChild(textNode2); еще {var textNode = document. createTextNode(text + "("); var node = document.createElement("font"); node.style.textDecoration = "подчеркивание"; node.innerText = акселератор; this._span.appendChild(textNode); this._span. appendChild(node); this._span.appendChild(document.createTextNode(")")); this.subWidth = this.subWidth - 0 + 48; } } else { var textNode = document.createTextNode(text); .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"; this._span.EventHandler = this; ._span.onmouseover = function(){this.EventHandler._span_MouseOver(this,event);} this._span.onmouseout = function(){this.EventHandler._span_MouseOut(this,event);} this._span.onclick = function() () {this.EventHandler._span_Click(this,event);} } if (accelerator != null) { this.accelerator = Accelerator.charCodeAt(0 } MenuItem.prototype.ShowSubmenu = function() { var pos = this); .getObjPosition(); var subSpan = document.createElement("span"); subSpan.style.position = "absolute"; if(this.parent instanceof 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 = "solid 1px #ACA899"; subSpan.style.color = "#000000" ; subSpan.className = "subMenu"; subSpan.owner = this.id; //this._span.onmouseout = function(){}; for (var i = 0; i < this.subMenuItems.length; i++) { this .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(); } MenuItem.prototype._span_Click = функция (отправитель, событие) ) { if (!this.hasChild() || this.clickEvent) { this.hideSubmenu(true); this.onclick(); else { if(this.hasChild()) { this.ShowSubmenu(); родитель._showSub = true;} } if (event.stopProgation) event.stopProgpagation(); else event.cancelBubble = true; MenuItem.prototype._span_MouseOver = функция (отправитель, событие) { this.hideSubmenu(); (отправитель); if(this.hasChild() && (this.parent._showSub || this.parent instanceof MenuItem)) { this.ShowSubmenu(); } } MenuItem.prototype._span_MouseOut = function(sender, event) { this ._cleanMenu(sender); //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 родительский = this.parent while (parent; != null) { родитель._showSub = false; родитель = родитель.родитель; } } this._cleanMenu(this._span); subMenus[i].parentNode.removeChild(subMenus[i]); isParentOf = function(owner) { var родительский = this.parent; while(parent != null) { if (owner == родительский.id) return true; родительский = родительский.parent; } return false } //Получаем объект; координаты MenuItem.prototype.getObjPosition = function() { var obj = this._span; var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); MenuItem.Instances[this.id] = this; ( this); if (document.body.onkeydown == null) { document.body.onkeydown = function() { for (var i = 0; i < MenuItem.Instances.All.length; i++) { if (MenuItem. Экземпляры .All[i].accelerator != null) { if (event.altKey && event.keyCode == MenuItem.Instances.All[i].accelerator) { MenuItem.Instances.All[i]._span_Click.call(MenuItem .Instances.All[i],MenuItem.Instances.All[i]._span,event,event } } } } } if (document.body.onclick == null) { document.body.onclick = function() { MenuItem); .Instances.All[0].hideSubmenu(true); } } } MenuItem.Instances = новый Array(); функция MainMenu(id,cfgSrc) { this.items = новый массив (); this.parent = null; this.id = id; MainMenu.prototype._loadCfg = function(src) //Чтение из файла конфигурации { try { var objXMLDoc = new ActiveXObject("Microsoft.XMLDOM"); async = false; objXMLDoc.load(src); if (objXMLDoc.documentElement == null) throw new TypeError("Ошибка анализа XML-документа! "); return objXMLDoc; } catch(e) { alert("Ошибка анализа XML-документа!"); throw new TypeError("Ошибка анализа XML-документа!"); } } MainMenu.prototype._applyCfg = function(element, menuItem) { var id = element.getAttribute("id"); var text = element.getAttribute("Text"); var onClick = element.getAttribute("onClick"); var Accelerator = element.getAttribute("Accelerator"); subMenuItem = новый MenuItem(id,text,onClick,Accelerator); if(menuItem!= null) MenuItem.addChild(subMenuItem); else this.addItem(subMenuItem); for (var i = 0; i < element.childNodes.length); ; i++) { if (element.childNodes[i].tagName == "MenuItem") { this._applyCfg(element.childNodes[i], subMenuItem); } } } MainMenu.prototype._setStatus = function(xmlDoc) { var cfgElements = xmlDoc.getElementsByTagName("MenuItem"); for (var i = 0; i < cfgElements.length; i++) { var element = cfgElements[i]; var id = element.getAttribute("var проверено"); element.getAttribute("Проверено"); var selected = element.getAttribute("Выбрано"); var видимый = element.getAttribute("Видимый"); var отключен = element.getAttribute("Отключено"); null) {продолжить; } если (проверено == "истина") { MenuItem.Instances[id].Check() } если (выбрано == "истина") { MenuItem.Instances[id].Select(); if (visible == "false") { 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 (items[i].id == id) { return items[i]; } if (items[i].subMenuItems.length > 0) { this._find(id, items[i].subMenuItems } } return); null } MainMenu.prototype.addItem = функция (menuItem) { this.items.push(menuItem); MenuItem.parent = this; } MainMenu.prototype.removeItem = function (id) { return this._delete (id, this. элементы); } 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); return item; } 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") { alert(" XML-документ не является допустимым файлом конфигурации главного меню! (Имя тега корневого элемента не MainMenu)"); throw new TypeError("Документ XML не является допустимым файлом конфигурации главного меню! (Имя тега корневого элемента не MainMenu)"); } for ( var i = 0; i < rootElement .childNodes.length; i++) { if (rootElement.childNodes[i].tagName == "MenuItem") { this._applyCfg(rootElement.childNodes[i] } } this._setStatus (objXMLDoc); } MainMenu.prototype .Show = function() { document.body.appendChild(this._div); for (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);