ภาษาไทย
<html> <head> </head> <script language="javascript"> function PageLoad() { /*var myMenu = new MainMenu('menu','test.xml'); myMenu.Show();*/ var myMenu = new MainMenu('menu'); var menuFile = new MenuItem('File','File',null,'F'); var menuSave = ใหม่ MenuItem('บันทึก','บันทึก','document.execCommand) ("บันทึกเป็น")','S'); var menuExit = new MenuItem('Exit','Exit','Exit()','X'); ,null,'E'); var menuView = new MenuItem('View','View',null,'V'); var menuProg = new MenuItem('Prog','เริ่มต้นผ่านสคริปต์โปรแกรม','SelectOpt(สิ่งนี้) )'); var menuConf = new MenuItem('Conf','เริ่มต้นผ่านไฟล์กำหนดค่า','SelectOpt(this)'); var menuChk = new MenuItem('Chk','Test: multiple options'); new MenuItem('Chk1','Test: ตรวจสอบตัวเลือก 1','CheckOpt (นี้)'); menuHelp = new MenuItem('Help','Help',null,'H'); var menuTopics = new MenuItem('Content ','เนื้อหาช่วยเหลือ',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(menuChk); menuChk.addChild(menuChk1); menuChk.addChild(menuAbout); myMenu.addItem(menuFile); addItem(menuEdit); myMenu.addItem(); menuContent.Disable(); .Check(); } ฟังก์ชั่น contact() { alert('Contact us'); } 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(); } ฟังก์ชั่น CheckOpt(เป้าหมาย) { 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'); ' บันทึก', 'document.execCommand("SaveAs")','S'); var menuExit = new MenuItem('Exit','Exit','Exit()','X'); ( 'แก้ไข', 'แก้ไข', null, 'E'); var menuView = new MenuItem('View','View',null,'V'); var menuProg = new MenuItem('Prog','via program script Initialize','SelectOpt(this)'); var menuItem('Conf','เริ่มต้นผ่านไฟล์การกำหนดค่า','SelectOpt(นี้)'); var menuChk1 = new MenuItem('Chk1','Test: ตัวเลือกที่ซับซ้อน 1','CheckOpt(นี้)'); var menuItem('Chk1','ทดสอบ: ตรวจสอบตัวเลือก 2','CheckOpt(นี้)'); var menuItem('Help',') Help ',null,'H'); var menuTopics = new MenuItem('หัวข้อ','หัวข้อช่วยเหลือ',null,'T'); var menuContent = new MenuItem('เนื้อหา','เนื้อหาช่วยเหลือ',' C '); var menuAbout = new MenuItem ('เกี่ยวกับ','AboutMenuItem','alert('MenuItem Ver1.00 โดย Akira(akira_cn@msn.com)')','A'); ; myMenu.addItem (เมนูแก้ไข); myMenu.addItem (เมนู View.addItem); menuFile.addChild (menuExit); menuView.addLine(); menuHelp.addChild(menuContent); menuHelp.addChild(menuAboug) ; myMenu.Show(); menuTopics.Disable(); menuProg.Select(); </script> </textarea> editBox2" style="width:100%;height:90%;display:none"> ตัวอย่างการเริ่มต้นเมนูหลักผ่านไฟล์คอนฟิกูเรชัน: <!--ไฟล์คอนฟิกูเรชัน xml เช่น บันทึกเป็น test.xml-- > <?xml version ="1.0" encoding="gb2312" standalone="yes"?> <MainMenu> <MenuItem id="File" Text="File" Accelerator="F"> <MenuItem id="Save" ข้อความ ="บันทึก" ตัวเร่งความเร็ว ="S" onClick="document.execCommand('SaveAs')"/> <MenuItem id="Exit" Text="Exit" Accelerator="X" onClick="Exit()"/> < /MenuItem> <MenuItem id="แก้ไข" Text="แก้ไข" Accelerator="E" Disabled="true"> </MenuItem> <MenuItem id="View" Text="View" Accelerator="V"> <MenuItem id="Prog" Text="เริ่มต้นผ่านสคริปต์โปรแกรม" Selected="true" onClick="SelectOpt(this)"/> <MenuItem id="Conf" Text="เริ่มต้นผ่านไฟล์การกำหนดค่า" onClick="SelectOpt(this) "/> <MenuItem /> <MenuItem id="Chk1" Text="ทดสอบ: ตรวจสอบตัวเลือก 1" Checked="true" onClick="CheckOpt(this)"/> <MenuItem id="Chk2" Text="Test: ตรวจสอบตัวเลือก 2" onClick ="CheckOpt(this)"/> </MenuItem> <MenuItem id="Help" Text="Help" Accelerator="H"> <MenuItem id="Topics" Text="Help Topics" Accelerator ="T" Disabled ="true"/> <MenuItem id="Content" Text="เนื้อหาวิธีใช้" Accelerator="C" Disabled="true"/> <MenuItem/> <MenuItem id="About" Text=" เกี่ยวกับ MenuItem" Accelerator= "A" onClick="alert('MenuItem Ver1.00 โดย Akira(akira_cn@msn.com)')"/> </MenuItem> </MainMenu> <script> var myMenu = new MainMenu(' menu','test .xml'); //อ่านข้อมูลเมนูจากไฟล์กำหนดค่า test.xml myMenu.Show(); </script> </textarea> </body> </html> <!---- ---- -------------------------------------------------- ---- --------------- ส่วนควบคุมเมนูโปรแกรมหลัก เวอร์ชั่น 1.00 Akira (akira_cn@msn.com) --------------- - ------------------------------------------------- - ---> <script language = "javascript"> ฟังก์ชั่น MenuItem (id, ข้อความ, clickEvent, ตัวเร่งความเร็ว, subWidth) { this.id = null; this.text = null; this.accelerator = null; if (id == null) { this.id = "menu" + (new Date()).getTime(); } อื่น ๆ this.id = 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; } อื่น ๆ this.subWidth = subWidth; onclick = function(){}; else this.onclick = function(){eval(clickEvent);}; if (ตัวเร่งความเร็ว != null) // ปุ่มลัด { this.accelerator = accelerator; } this.subMenuItems = อาร์เรย์ใหม่ ( this.visible = true; this.disabled = false; this.checked = false; MenuItem.prototype.Hide = function() { this.visible = false; "ไม่มี"; } 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._span.onmouseout = function(){this.EventHandler._span_MouseOut(นี่,เหตุการณ์) );} this._span.onclick = function(){this.EventHandler._span_Click(this,event);} this._span.style.color = "#000000"; } MenuItem.prototype.Disable = function() { นี่ .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); สำหรับ (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]); สำหรับ (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; ต้นแบบ.addChild = function(menuItem) { this.subMenuItems.push(menuItem); menuItem.parent = this; } MenuItem.prototype.addLine = function() { this.addChild(new MenuItem()); hasChild = function() { return this.subMenuItems.length > 0; } this._span = document.createElement("span"); this._span.id = this.id; ; if (this.text == null) { this._span.appendChild(document.createElement("hr")); this._span.style.height = "2px"; ; this._span.style.marginBottom = "2px"; } else { if (accelerator != null) { var site = text.indexOf(accelerator); ถ้า (ไซต์ != -1) { var part1 = text.slice( 0, ไซต์); var part2 = text.slice(ไซต์ + 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); } createTextNode(text + "("); var node = document.createElement("font"); node.style.textDecoration = "underline"; node.innerText = accelerator; this._span.appendChild(textNode); this._span. appendChild(node); this._span.appendChild(document.createTextNode(")); this.subWidth = this.subWidth - 0 + 48; } } อื่น ๆ { var textNode = document.createTextNode (ข้อความ); .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._span.onmouseout = function(){this.EventHandler._span_MouseOut(นี่,เหตุการณ์);} this._span.onclick = ฟังก์ชั่น (){this.EventHandler._span_Click(this,event);} } if (ตัวเร่งความเร็ว != 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 ของเมนูหลัก) { subSpan.style.left = subSpan.style .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.abstractColor = "#FFFFFF"; subSpan.style.border = "ทึบ 1px #ACA899"; ; subSpan.className = "subMenu"; subSpan.owner = this.id; //this._span.onmouseout = function(){}; .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 = นี่ subWidth > 96 ? this.subWidth : 96; //this._span.appendChild(subSpan); document.body.appendChild(subSpan); } MenuItem.prototype._span_Click = ฟังก์ชั่น(ผู้ส่ง) ) { if (!this.hasChild() || this.clickEvent) { this.hideSubmenu(true); this.onclick(); } อื่น ๆ { if(this.hasChild()) { this.ShowSubmenu(); parent._showSub = true; } } if (event.stopPropagation) event.stopProgpagation(); else event.cancelBubble = true; } MenuItem.prototype._span_MouseOver = ฟังก์ชั่น (ผู้ส่ง, เหตุการณ์) { this.hideSubmenu(); (ผู้ส่ง); if(this.hasChild() && (this.parent._showSub || this.parent instance of MenuItem)) { this.ShowSubmenu(); } } MenuItem.prototype._span_MouseOut = function(sender, event) { this ._cleanMenu(ผู้ส่ง); //this.hideSubmenu(); } MenuItem.prototype._activeMenu = function(menuSpan) { menuSpan.style.abstractColor = "#316AC5"; menuItem.prototype._activeMenu .prototype._cleanMenu = function(menuSpan) { if (menuSpan.parentNode.className == "subMenu") menuSpan.style.abstractColor = "#FFFFFF"; else menuSpan.style.พื้นหลังสี = "#F1EEE5"; color = "#000000"; } MenuItem.prototype.hideSubmenu = function(bHideAll) { var subMenus = document.getElementsByTagName("span"); สำหรับ (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; ในขณะที่ (parent != null) { parent._showSub = false; parent = parent.parent; } } this._cleanMenu(this._span); subMenus[i].parentNode.removeChild(subMenus[i]); } } } isParentOf = function(owner) { var parent = this.parent; while(parent != null) { if (owner == parent.id) คืนค่าจริง; parent = parent.parent; พิกัด MenuItem.prototype.getObjPosition = function() { var obj = this._span; var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; obj.offsetParent; { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent.offsetParent; } กลับ ([objLeft,objTop]); } MenuItem.Instances[this.id] = นี้; ( นี้); 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); ถ้า (document.body.onclick == null) { document.body.onclick = function() { MenuItem Instances.All[0].hideSubmenu(true); } } MenuItem.Instances = new Array(); MenuItem.Instances.All = new Array(); ฟังก์ชัน MainMenu(id,cfgSrc) { this.items = new Array ( ); this.parent = null; this.id = id; MainMenu.prototype._loadCfg = function(src) // อ่านจากไฟล์การกำหนดค่า { ลอง { var objXMLDoc = new ActiveXObject("Microsoft.XMLDOM"); async = false; objXMLDoc.load(src); if (objXMLDoc.documentElement == null) โยน TypeError ใหม่ ("การแยกวิเคราะห์เอกสาร XML ล้มเหลว! "); return objXMLDoc; } catch(e) { alert("การแยกวิเคราะห์เอกสาร XML ล้มเหลว!"); โยน TypeError ใหม่ ("การแยกวิเคราะห์เอกสาร XML ล้มเหลว!"); } } MainMenu.prototype._applyCfg = function(element, menuItem) { var id = element.getAttribute("id"); var text = element.getAttribute("ข้อความ"); var onClick = element.getAttribute("onClick"); var Accelerator = element.getAttribute("Accelerator"); subMenuItem = new MenuItem(id,text,onClick,Accelerator); if(menuItem != null) menuItem.addChild(subMenuItem); อื่น ๆ this.addItem(subMenuItem); สำหรับ (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"); สำหรับ (var i = 0; i < cfgElements.length; i++) { var element = cfgElements[i]; var id = element.getAttribute("id"); element.getAttribute("ตรวจสอบ"); var ที่เลือกไว้ = element.getAttribute("ถูกเลือก"); var มองเห็นได้ = element.getAttribute("มองเห็นได้"); var ปิดการใช้งาน = element.getAttribute("ปิดการใช้งาน"); null) { ดำเนินการต่อ; } if (เลือก == "true") { MenuItem.Instances[id].Check(); } if (selected == "true") { MenuItem.Instances[id].Select(); if (visible == "false") { MenuItem.Instances[id].Hide(); } if (ปิดการใช้งาน == "true") { MenuItem.Instances[id].Disable(); } } } MainMenu.prototype. menuItem = function(id) { return this._find(id, this.items); } MainMenu.prototype._find = function(id, items) { สำหรับ (var i = 0; i < items.length; i++) { ถ้า (items[i].id == id) { return items[i]; } if (items[i].subMenuItems.length > 0) { this._find(id, items[i].subMenuItems); } } กลับ null; } MainMenu.prototype.addItem = function(menuItem) { this.items.push(menuItem); menuItem.parent = this; } MainMenu.prototype.removeItem = function(id) { return this._delete(id, this. รายการ); } MainMenu.prototype._delete = function(id, items) { สำหรับ (var i = 0; i < items.length; i++) { if (items[i].id == id) { var item = items [i]; items.splice(i); ส่งคืนรายการ; } 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.พื้นหลังสี = "#F1EEE5"; .body.appendChild(this._div); if(cfgSrc != null) { var objXMLDoc = this._loadCfg(cfgSrc); var rootElement = objXMLDoc.documentElement; if(rootElement.tagName != "MainMenu") { การแจ้งเตือน (" เอกสาร XML ไม่ใช่ไฟล์กำหนดค่าเมนูหลักตามกฎหมาย! (ชื่อแท็กขององค์ประกอบรูทไม่ใช่ MainMenu)"); Throw new TypeError("เอกสาร XML ไม่ใช่ไฟล์การกำหนดค่าเมนูหลักที่ถูกกฎหมาย! (ชื่อแท็กขององค์ประกอบรูทไม่ใช่ MainMenu)"); } สำหรับ ( var i = 0; i < rootElement .childNodes.length; i++) { if (rootElement.childNodes[i].tagName == "MenuItem") { this._applyCfg(rootElement.childNodes[i]) } นี้._setStatus (objXMLDoc); } MainMenu.prototype .Show = function() { document.body.appendChild(this._div); สำหรับ (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])); } } สำหรับ (var i = 0; i < this .items.length; i++) { this._div.appendChild(this.items[i]._span); } } </script>