2. Tech
  3. WebMenu Programming Wonderful History (1) Structure Overview and All Original Codes

WebMenu Programming Wonderful History (1) Structure Overview and All Original Codes

xiaoxiao2021-03-06  73

The effect of the menu is a screenshot inside my album. Menutest.htm actual application test page Menudata.xml menu configuration page MENU.CSS menu style sheet WebMenu.htc package HTC menu component original code: ================== ================= menutest.htm

New page 1 </ Title></p> <p><link rel = "stylesheet" type = "text / css" href = "menu.css"></p> <p></ hEAD></p> <p><Body topmargin = "0" leftmargin = "0" οncοntextmenu = "Menu1.showMenu (window, Menu1.dataSource.documentElement.selectSingleNode ( '// MenuItem'), window.document.body, event.x, event.y) "></p> <p><div id = "menubardiv"> </ div></p> <p><WebMenu Datasource = "XmLData" class = "WebMenu" id = "menu1" width = "100" Effect = "2" menutype = "1" Container = "menubardiv"> </ webmenu></p> <p><WebMenu Datasource = "XmLData" class = "WebMenu" id = "menu2" width = "100" Effect = "3" menutype = "0" Container = "menubardiv"> </ webmenu></p> <p><textarea rows = "17" id = "code" cols = "73" style = "display: none"></p> <p>============================================================================================================================================================== 1.0 "Encoding =" GB2312 "?> <Root></p> <p><MenuItem Hassub = "1" Subwidth = "160"></p> <p><Menuitem Func = "Text =" First Level Menu Item 1 "IMG =" Save.gif "/></p> <p><Menuitem Func = "Text =" first-level menu item 2 "img =" addnew.gif "Hassub =" 1 "HeadColumn =" 2 "SubWidth =" 200 "></p> <p><Menuitem Func = "" ischeckItem = "1" Checked = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" Checked = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" img = "addnew.gif" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" Checked = "1" text = "secondary menu item 3" IMG = "save.gif" /> <menuitem func = "" ischeckItem = "1" checked = "1 "Text =" secondary menu item 3 "IMG =" "/></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p><Menuitem Func = "" ischeckItem = "1" text = "secondary menu item 3" IMG = "" /></p> <p></ Menuitem></p> <p><MenuItem Func = "Text =" First Level Menu Item 3 "IMG =" refresh.gif "Hasline =" 1 "/></p> <p><Menuitem Func = "Text =" first-level menu item 4 "IMG =" "/></p> <p><MenuItem Func = "Text =" 1 menu item 5 "IMG =" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "</p> <p><MenuItem Func = "Text =" Secondary Menu Item 3 "IMG =" Edit.gif "Hasline =" 1 "/></p> <p><Menuitem Func = "Text =" secondary menu item 3 "IMG =" "/></p> <p><Menuitem Func = "Text =" secondary menu item 3 "img =" "" "" "Subwidth =" 160 "> <menuitem func =" text = "three-level menu item 4" IMG = " Sendemail.gif "HASLINE =" 1 "/></p> <p><Menuitem Func = "Text =" Third Level Menu Item 4 "IMG =" "/></p> <p><Menuitem Func = "Text =" Third Level Menu Item 4 "IMG =" "/></p> <p></ Menuitem></p> <p></ Menuitem></p> <p><MenuItem Func = "Text =" First Level Menu Item 6 "IMG =" Search.gif "/></p> <p></ Menuitem></p> <p></ Root></p> <p>==================================================== Menu.css.webmenu {</p> <p>BEHAVIOR: URL ("WebMenu.htc")</p> <p>}</p> <p>.Menupanel</p> <p>{</p> <p>Border: 1PX Solid # 002d96;</p> <p>Cursor: Hand;</p> <p>Filter: progid: DxImageTransform.microsoft.Shadow (enabled = true, color = # 99ccff, direction = 135, strength = 3);</p> <p>Table-layout: fixed;</p> <p>}</p> <p>.ItemHightlightdiv</p> <p>{</p> <p>Border: 1px solid # 000080;</p> <p>Background-color: # ffeec2;</p> <p>Position: absolute;</p> <p>Z-Index: 6;</p> <p>HEIGHT: 23PX;</p> <p>LEFT: 2PX;</p> <p>Cursor: Hand;</p> <p>}</p> <p>.ItemHighlighttable</p> <p>{</p> <p>Table-layout: fixed;</p> <p>Width: 100%;</p> <p>HEIGHT: 100%;</p> <p>Cursor: Hand;</p> <p>}</p> <p>.Itemhl</p> <p>{Padding-left: 6px;</p> <p>FONT-SIZE: 10PT;</p> <p>White-space: nowrap;</p> <p>}</p> <p>.Itemnormal</p> <p>{</p> <p>Padding-left: 4px;</p> <p>HEIGHT: 25PX;</p> <p>FONT-SIZE: 10PT;</p> <p>Padding-top: 2px;</p> <p>Background-color: # f6f6f6;</p> <p>Border-bottom: 1px solid # f6f6f6;</p> <p>White-space: nowrap;</p> <p>}</p> <p>.Itemnormalline</p> <p>{</p> <p>Padding-left: 4px;</p> <p>Padding-top: 2px; Height: 25px;</p> <p>FONT-SIZE: 10PT;</p> <p>Background-color: # f6f6f6;</p> <p>Border-bottom: 1px solid # 6a8ccb;</p> <p>White-space: nowrap;</p> <p>}</p> <p>.Piccolummlefthalf</p> <p>{</p> <p>Padding-left: 7px;</p> <p>HEIGHT: 25PX;</p> <p>Width: 26px;</p> <p>Afilter: progid: DxImageTransform.microsoft.gradient (StartColorstr = # E3EFFF, EndColorstr = # 8eb3e7, gradienttype = 1);</p> <p>Background-image: URL (Lefthalf.gif);</p> <p>}</p> <p>.Piccolummrighthalf</p> <p>{</p> <p>HEIGHT: 25PX;</p> <p>Width: 26px;</p> <p>Padding-left: 5px;</p> <p>Afilter: progid: DxImageTransform.microsoft.gradient (StartColorstr = # 8EB3E7, EndColorstr = # 88Aee4, gradientType = 1);</p> <p>Background-image: URL (Righthalf.gif);</p> <p>}</p> <p>.Piccolummfull</p> <p>{</p> <p>Padding-left: 5px;</p> <p>HEIGHT: 25PX;</p> <p>Width: 26px;</p> <p>Afilter: Progid: DxImageTransform.microsoft.gradient (StartColorstr = # DDECFE, EndColorstr = # 81A9E2, GradientType = 1);</p> <p>Background-image: URL (Fullbg.gif);</p> <p>}</p> <p>.Divpanel {</p> <p>Position: relative;</p> <p>Height: 1px;</p> <p>Z-Index: 2;</p> <p>Visibility: hidden;</p> <p>}</p> <p>.Menubarhlyellow</p> <p>{</p> <p>TEXT-ALIGN: CENTER;</p> <p>Padding-right: 4px;</p> <p>Padding-left: 4px;</p> <p>Padding-top: 1px;</p> <p>Padding-bottom: 1px;</p> <p>Filter: progid: DXIMAGETRANSFORM.MICROSoft.gradient (startcolorstr = # fff4cc, endcolorstr = # ffd79d, gradienttype = 0);</p> <p>Border: 1px solid # 000080;</p> <p>}</p> <p>.Menubarhlblue</p> <p>{</p> <p>TEXT-ALIGN: CENTER;</p> <p>Padding-right: 4px;</p> <p>Padding-left: 4px;</p> <p>Padding-top: 1px;</p> <p>Padding-bottom: 1px;</p> <p>Filter: progid: DxImageTransform.microsoft.gradient (startcolorstr = # e3efff, endcolorstr = # 98b9e8, gradienttype = 0);</p> <p>Border: 1px solid # 000080;</p> <p>}</p> <p>.Menubar {</p> <p>Background-color: # 98b9e8;</p> <p>FONT-SIZE: 10PT;</p> <p>HEIGHT: 24PX;</p> <p>Width: 100%;</p> <p>Cursor: Hand;</p> <p>}</p> <p>.Menubarnormal {</p> <p>FONT-SIZE: 10PT;</p> <p>White-space: nowrap;</p> <p>Padding-left: 4px;</p> <p>Padding-right: 4px;</p> <p>Padding-top: 1px;</p> <p>Padding-bottom: 1px;</p> <p>Cursor: Hand;</p> <p>Border: 1px Solid # 98b9e8;</p> <p>}</p> <p>=================================================== WebMenu.htc <public: Component> <Public: attach event = "onDocumentReady" Onevent = "FNInit ()" /></p> <p><Public: method name = "showmenu" /></p> <p><Public: property name = "datasource" /></p> <p><Public: proty name = "width" /></p> <p><Public: proty = "effect" /></p> <p><Public: property name = "menuType" /></p> <p><Public: proty = "container" /></p> <p><script language = javaScript></p> <p>// Initialization default value</p> <p>Function Fninit () {</p> <p>ELEMENT.DATASOURCE = EVAL ("Window.Document.all." Datasource);</p> <p>INITDATA = Element.dataSource.documentelement.selectsinglenode ("// MenuItem");</p> <p>IF (element.MenuType == "1") {</p> <p>INITWINDOW = WINDOW;</p> <p>Initoele = Window.Document.body;</p> <p>Window.Document.childwin = null;</p> <p>/*window.document.attachevent("onTextMenu" ,Function () {</p> <p>Showmenu (InitWindow, InitData, Initoele, Event.x, Event.y)</p> <p>}); * /</p> <p>}</p> <p>Else {</p> <p>Omenubar = createmenubar ();</p> <p>evAl ("Window.Document.all." Element.Container ". Appendchild (Omenubar)")</p> <p>}</p> <p>Window.Document.attachevent ("onMouseDown", function () {</p> <p>Hidemenu (Window);</p> <p>IF (! element.menubar) return;</p> <p>Element.menubar.isdisplay = false;</p> <p>Oles = element.menubar.GtelementsBytagname ("span");</p> <p>For (i = 0; i <Olees.length; i ) {</p> <p>Oles [i] .classname = "menubarnormal";</p> <p>});</p> <p>}</p> <p>/ / Establish a POPUP window, the window from the parameter opopup pointing</p> <p>Function FncreatePopup (Oparentwin) {</p> <p>Onewchildwin = oparentwin.document.parentWindow.createPopup ();</p> <p>Onewchildwin.document.createstylesheet ('menu.css');</p> <p>Oparentwin.document.childwin = onewchildwin;</p> <p>}</p> <p>// Menu fade in effect, you can set it on the page via the Effect property.</p> <p>Function Fadein (ODIV) {</p> <p>ODIV.Style.visibility = "hidden";</p> <p>Switch (element.effect) {</p> <p>Case ("1"): // Expand from left to right</p> <p>Strfilter = "Progid: DxImageTransform.microsoft.gradientwipe (duration = 0.5, gradientsize = 0.75, motion = forward)</p> <p>Break;</p> <p>Case ("2"): // Particle effect</p> <p>Strfilter = "Progid: DXIMAGETRANSFORM.MICROSOFT.REVEALTRANS (DURATION = 0.5, Transition = 12)";</p> <p>Break;</p> <p>Case ("3"): // from top to bottom</p> <p>Strfilter = "progid: DxImageTransform.microsoft.gradientwipe (duration = 0.5, gradientsize = 0.25, motion = forward, wipestyle = 1)"</p> <p>Break;</p> <p>Case ("4"): // The most ordinary fade</p> <p>Strfilter = "Progid: DXIMAGETRANSFORM.MICROSOFT.FADE ()";</p> <p>Break;</p> <p>DEFAULT:</p> <p>Strfilter = "Progid: DXIMAGETRANSFORM.MICROSOFT.GRADIENTWIPE (DURATION = 0.5, gradientsize = 0.75, motion = forward);</p> <p>}</p> <p>ODIV.Style.Filter = strfilter;</p> <p>ODIV.FILTERS [0] .Apply ();</p> <p>ODIV.Style.visibility = "visible";</p> <p>ODIV.FILTERS [0] .pe (0.2);</p> <p>}</p> <p>Function Showmenu (Ocurrwin, NodeData, Ole, X, Y) {</p> <p>// The current window has not yet sub-window, then the new subsidy window, then create a style.</p> <p>IF (Ocurrwin.Document.childwin == NULL) {</p> <p>FncreatePopup (Ocurrwin);</p> <p>}</p> <p>Ochildwin = Ocurrwin.document.Childwin;</p> <p>/ / If the child window of the current window exists</p> <p>// If the content of the window currently wants is not the window content that is previously displayed</p> <p>/ / Or the window content to be displayed does not exist, then rewrite the window menu content to be displayed.</p> <p>IF (! ocurrwin.document.body.preshowItem || c orwin.document.body.preshowItem! = Ole) {</p> <p>Ochildwin.Document.body.innerhtml = ""; // hassub = "1" HeadColumn = "1" Subwidth = "220"</p> <p>// hassub = (nodedata.attributes.getnameditem ("hassub"))? True: false;</p> <p>Subwidth = (NodeData.attributes.getnamedItem ("Subwidth"))? NodeData.attributes.getnamedItem ("Subwidth"). Text: false;</p> <p>HeadColumn = (NodeData.attributes.getnamedItem ("HeadColumn"))? NodeData.attributes.getnamedItem ("HeadColumn"). Text: "0";</p> <p>ODIV = CreateBasePanel (Ochildwin, Subwidth);</p> <p>Ochildwin.Document.body.Appendchild (ODIV);</p> <p>Iheight = 4;</p> <p>For (i = 0; i <nodedata.childNodes.Length; i ) {</p> <p>OTR = CreateItemTemp (ODIV, Ochildwin, Headcolumn, Subwidth * 1);</p> <p>Anode = nodedata.childNodes.Item (i)</p> <p>FillMenuitemdata (Anode, OTR, Ochildwin, Headcolumn);</p> <p>Iheight = iHEIGHT 25;</p> <p>}</p> <p>CreateHldiv (Ochildwin, HeadColumn);</p> <p>Ocurrwin.document.body.preshowItem = Ole;</p> <p>Ochildwin.document.iheight = iHEIGHT * 1;</p> <p>Ochildwin.document.iWidth = Subwidth * 1 4;</p> <p>}</p> <p>// If the window to be displayed is already displayed, hide the highlights on the sub-window, no longer do the action of the display menu</p> <p>IF (Ocurrwin.Document.body.preshowItem == Ole && Ochildwin.Document.divpanel.style.visibility == "Visible" && OCHILDWIN.ISopen) {</p> <p>Ocurrwin.document.childwin.document.body.hldiv.style.visibility = "hidden";</p> <p>Return</p> <p>}</p> <p>// Execute the display sub-menu action</p> <p>IF (x && y) {</p> <p>Xconer = x;</p> <p>YCONER = Y;</p> <p>}</p> <p>Else {</p> <p>Xconer = Ole.OffSetWidth Ole.Offsetleft;</p> <p>Yconer = Ole.OffSettop;</p> <p>}</p> <p>Ochildwin.show (Xconer, Yconer, Ochildwin.Document.iwidth, Ochildwin.Document.iheight, Ocurrwin.Document.body);</p> <p>// Display menu using fade in effect</p> <p>Fadein (Ochildwin.Document.divpanel);</p> <p>// Do not use the system's right-click menu.</p> <p>Try {</p> <p>Event.ReturnValue = false;</p> <p>Catch (e) {</p> <p>}</p> <p>}</p> <p>Function CreateHldiv (Opopup, HeadColumn) {</p> <p>/ / Create a highlighted effect layer that moves to the menu item</p> <p>Ohldiv = opopup.document.createElement ("DIV");</p> <p>Otable = opopup.document.createElement ("<Table Height = '100%' Border = /" 0 / "Cellspacing = /" 0 / "Cellpadding = /" 0 / ">");</p> <p>OtBody = opopup.document.createElement ("tbody"); // tbody is the element that must be needed, otherwise the table cannot be displayed</p> <p>Otable.classname = "itemhonglighttable";</p> <p>Ohldiv.className = "itemhightlightdiv";</p> <p>Ohldiv.Appendchild (OTABLE);</p> <p>Otable.Appendchild (OTBODY);</p> <p>OTR = OTABLE.INSERTROW ();</p> <p>Switch (headcolumn) {</p> <p>Case "0":</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 23;</p> <p>Otd.classname = "itemhl";</p> <p>OTR.PICTD = OTD;</p> <p>Break;</p> <p>Case "1":</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.Width = 23;</p> <p>Otd.classname = "itemhl";</p> <p>OTR.CHECKTD = OTD;</p> <p>Break;</p> <p>Case "2":</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.Width = 23;</p> <p>Otd.classname = "itemhl";</p> <p>OTR.PICTD = OTD;</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 23;</p> <p>Otd.classname = "itemhl";</p> <p>OTR.CHECKTD = OTD;</p> <p>Break;</p> <p>}</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 10;</p> <p>Otd.classname = "itemhl";</p> <p>Otd.innerhtml = ""</p> <p>Otd = otr.insertcell ();</p> <p>Otd.classname = "itemhl";</p> <p>OTR.TEXTTD = OTD;</p> <p>Otd.nowrap = true;</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 22;</p> <p>Otd.classname = "itemhl";</p> <p>otd.align = "center";</p> <p>Ohldiv.itable = Otable;</p> <p>Ohldiv.itable.itbody = OTBODY;</p> <p>Opopup.Document.body.Appendchild (Ohldiv);</p> <p>Ohldiv.style.visibility = "hidden"; opopup.document.body.hldiv = OHLDIV;</p> <p>}</p> <p>// The mouse moves highlights and takes the content below the highlight layer.</p> <p>Function Highlight (OELE, OWIN) {</p> <p>Switch (Ole.HeadColumn) {</p> <p>Case "0":</p> <p>Owin.document.body.hldiv.itable.cells [0] .Style.paddingleft = "3px";</p> <p>Owin.document.body.hldiv.itable.cells [2] .style.paddingleft = "5px";</p> <p>Break;</p> <p>Case "1":</p> <p>Owin.document.body.hldiv.itable.cells [0] .Style.paddingleft = "3px";</p> <p>Owin.document.body.hldiv.itable.cells [2] .style.paddingleft = "5px";</p> <p>Break;</p> <p>Case "2":</p> <p>Owin.document.body.hldiv.itable.cells [0] .style.width = 23;</p> <p>Owin.document.body.hldiv.itable.cells [1] .style.width = 25;</p> <p>Owin.document.body.hldiv.itable.cells [0] .style.paddingleft = "5px";</p> <p>Break;</p> <p>}</p> <p>For (i = 0; i <win.document.body.hldiv.itable.cells.Length; i ) {</p> <p>Owin.document.body.hldiv.itable.cells [i] .innerhtml = Ole.cells [i] .innerhtml;</p> <p>}</p> <p>Owin.document.body.hldiv.style.visibility = "visible";</p> <p>Owin.document.body.hldiv.style.top = Ole.OffSettop 1;</p> <p>Owin.document.body.hldiv.style.width = Ole.OffSetWidth - 2;</p> <p>Owin.document.body.hldiv.attachevent ("onclick", function () {</p> <p>IF (Ole.func == ") Return;</p> <p>Eval ("Window." Ole.Func);</p> <p>Hidemenu (Window);</p> <p>});</p> <p>}</p> <p>// When the mouse moves to the lower submenu item, turn off the next submenu</p> <p>Function Hidemenu (OWIN) {</p> <p>Try {</p> <p>Owin.Document.childwin.document.body.hldiv.style.visibility = "hidden";</p> <p>Owin.Document.childwin.hide ();</p> <p>}</p> <p>Catch (e) {</p> <p>}</p> <p>}</p> <p>/ / Establish a substrate to insert a menu item</p> <p>Function CreateBasePanel (OWIN, SUBWIDTH) {</p> <p>ODIV = OWIN.Document.createElement ("<div>");</p> <p>ODIV.CLASSNAME = "Divpanel";</p> <p>OTABLE = Owin.document.createElement ("<table border = /" 0 / "cellspacing = /" 0 / "cellpadding = /" 0 / "); otable.classname =" menupanel ";</p> <p>ODIV.Appendchild (OTABLE);</p> <p>OtBody = Owin.document.createElement ("TBODY");</p> <p>Otable.Appendchild (OTBODY);</p> <p>Owin.document.divpanel = ODIV;</p> <p>ODIV.TABLEPANEL = OTABLE;</p> <p>Return (ODIV);</p> <p>}</p> <p>// Template for the item to create a menu</p> <p>Function CreateItemTemp (ODIV, OWIN, HeadColumn, Subwidth) {</p> <p>OTABLE = ODIV.TABLEPANEL</p> <p>OTR = OTABLE.INSERTROW ();</p> <p>Switch (headcolumn) {</p> <p>Case "0": // Only picture columns</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 26;</p> <p>Otd.className = "piccolummfull";</p> <p>OTR.PICTD = OTD;</p> <p>Subwidth = SubWidth - 26</p> <p>Break;</p> <p>Case "1": // Only select the column</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 26;</p> <p>Otd.className = "piccolummfull";</p> <p>OTR.CHECKTD = OTD;</p> <p>Subwidth = SubWidth - 26</p> <p>Break;</p> <p>Case "2": // Both</p> <p>Otd = otr.insertcell ();</p> <p>otd.classname = "piccolummlefthalf";</p> <p>OTR.CHECKTD = OTD;</p> <p>Otd = otr.insertcell ();</p> <p>Otd.className = "PiccolumMrighthalf";</p> <p>OTR.PICTD = OTD;</p> <p>Subwidth = SubWidth - 26 * 2</p> <p>Break;</p> <p>Default: // The default is only the picture column</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 26;</p> <p>Otd.className = "piccolummfull";</p> <p>OTR.PICTD = OTD;</p> <p>Subwidth = SubWidth - 26</p> <p>}</p> <p>Otd = otr.insertcell ();</p> <p>Otd.style.width = 10;</p> <p>Otd.classname = "itemnormal";</p> <p>Otd.innerhtml = ""</p> <p>SubWidth = Subwidth - 10;</p> <p>Otd = otr.insertcell ();</p> <p>Otd.classname = "itemnormal";</p> <p>Otd.style.Width = Subwidth * 1 - 26;</p> <p>OTR.TEXTTD = OTD;</p> <p>Otd.nowrap = true;</p> <p>Otd = otr.insertcell ();</p> <p>Otd.Style.width = 26; Otd.className = "itemnormal";</p> <p>otd.align = "center";</p> <p>OTR.NEXTTD = OTD;</p> <p>Otd.style.paddingtop = "1px";</p> <p>Otd.style.paddingleft = "6px";</p> <p>Return (OTR);</p> <p>}</p> <p>// Fill menu items</p> <p>Function FillMenuitemdata (onode, OTR, OWIN, HeadColumn) {</p> <p>Oimg = onode.attributes.getnamedItem ("IMG"). Text;</p> <p>Ofunc = onode.attributes.getnamedItem ("func"). Text;</p> <p>Otext = onode.attributes.getnamedItem ("text"). Text;</p> <p>Blhassub = onode.attributes.getnameditem ("hassub")? TRUE: FALSE;</p> <p>BLSPLITLINE = onode.attributes.getnameditem ("HASLINE")? True: false;</p> <p>BlChecked = onode.attributes.getnameditem ("checked")? True: false;</p> <p>Switch (headcolumn) {</p> <p>Case "0": // Only picture columns</p> <p>Otr.pictd.innerhtml = (Oimg! = ")?" <img border = / "0 /" src = / "" Oimg "/" valign = / "absmiddle /" align = / "center /"> " ""</p> <p>Break;</p> <p>Case "1": // Only select the column</p> <p>OTR.CHECKTD.INNNERHTML = (blchecked)? "<img border = /" 0 / "src = /" menuchecked.gif / "valign = /" absmiddle / "align = /" center / ":"</p> <p>Break;</p> <p>Case "2": // Both</p> <p>Otr.pictd.innerhtml = (Oimg! = ")?" <img border = / "0 /" src = / "" Oimg "/" valign = / "absmiddle /" align = / "center /"> " ""</p> <p>OTR.CHECKTD.INNNERHTML = (blchecked)? "<img border = /" 0 / "src = /" menuchecked.gif / "valign = /" absmiddle / "align = /" center / ":"</p> <p>Break;</p> <p>Default: // The default is only the picture column</p> <p>Otr.pictd.innerhtml = (Oimg! = ")?" <img border = / "0 /" src = / "" Oimg "/" valign = / "absmiddle /" align = / "center /"> " ""</p> <p>IF (blhassub) {</p> <p>OTR.NEXTTD.INNNERHTML = "<img src = /" arrow.gif / "border = /" 0 / "valign = /" absmitdle / "width = /" 16px / "height = /" 16px / ">";</p> <p>Otr.attachevent ("OnMouseover", Function () {ShowMenu (Owin, Onode, OTR)})</p> <p>}</p> <p>Else {</p> <p>Otr.nexttd.innerhtml = "";</p> <p>Otr.attachevent ("OnMouseover", Function () {HideMenu (OWIN)})</p> <p>}</p> <p>IF (blsplitline) {</p> <p>OTR.NEXTTD.CLASSNAME = "itemnormalline";</p> <p>OTR.TEXTTD.CLASSNAME = "itemnormalline";</p> <p>}</p> <p>Else {</p> <p>OTR.NEXTTD.CLASSNAME = "itemnormal";</p> <p>OTR.TEXTTD.CLASSNAME = "itemnormal";</p> <p>}</p> <p>Otr.TextTd.innertext = OTEXT;</p> <p>Otr.headcolumn = headcolumn;</p> <p>Otr.attachevent ("OnMouseover", Function () {Highlight (OTR, OWIN)})</p> <p>Otr.func = OFNC;</p> <p>}</p> <p>Function cretemenubar () {</p> <p>Bardata = element.datasource.documentelement.selectsinglenode ("// menuitem");</p> <p>Otable = window.document.createElement ("Table");</p> <p>Otable.classname = "menubar";</p> <p>OtBody = WINDOW.Document.createElement ("TBody");</p> <p>Otable.Appendchild (OTBODY);</p> <p>OTR = OTABLE.INSERTROW ();</p> <p>Otd = otr.insertcell ();</p> <p>Oimg = window.document.createElement ("img")</p> <p>Oimg.src = "left.gif";</p> <p>Oimg.valign = "absmiddle";</p> <p>Otd.Appendchild (Oimg);</p> <p>For (i = 0; i <bardata.childnodes.length; i ) {</p> <p>Onode = Bardata.childNodes.Item (i);</p> <p>VAR OneWSPAN = Window.Document.createElement ("span");</p> <p>Onewspan.className = "MenuBarnormal"; onewspan.nodedata = onode;</p> <p>Onewspan.innerhtml = onode.attributes.getnamedItem ("text").</p> <p>Onewspan.hassub = (onode.attributes.getnameditem ("hassub")? TRUE: FALSE;</p> <p>Onewspan.style.width = 90;</p> <p>Otd.Appendchild (OneWSPAN);</p> <p>Onewspan.attachevent ("OnMouseover", Menuover;</p> <p>Onewspan.attachevent ("OnMouseDown", Menum Supousedown;</p> <p>}</p> <p>Element.menubar = otable;</p> <p>Return Otable;</p> <p>}</p> <p>Function menuover () {</p> <p>HideMenu (Window)</p> <p>Ole = Event.srcelement;</p> <p>Olees = Ole.Parentelement.getElementsBytagname ("span");</p> <p>For (i = 0; i <Olees.length; i ) {</p> <p>Oles [i] .classname = "menubarnormal";</p> <p>}</p> <p>IF (element.menubar.isdisplay == null || (Element.Menubar.ISDisplay! = null && element.menubar.isdisplay == false) {</p> <p>Ole.className = "MenuBarhlyellow";</p> <p>}</p> <p>Else {</p> <p>Ole.classname = "menubarhlblue";</p> <p>IF (! Ole.hassub) Return;</p> <p>Showmenu (Window, Ole.NodeData, Ole, GetAbsleft (Ole) 2, GetAbstop (Ole) Ole.OffsetHeight 1)</p> <p>}</p> <p>}</p> <p>Function menuMousedown () {</p> <p>Ole = Event.srcelement;</p> <p>Element.menubar.Isdisplay = element.menubar.isdisplay? false: true;</p> <p>Event.srcelement.className = (Ole.className == "MenuBarhlyellow")? "MenuBarhlblue": "MenuBarhlyellow";</p> <p>IF (element.menubar.isdisplay && Ole.hassub) Showmenu (Window, Ole.NodeData, Ole, GetAbsLeft (Ole) 2, GetAbstop (Ole) Ole.OffsetHeight 1);</p> <p>Event.cancelbubble = true;</p> <p>}</p> <p>Function GetAbsLeft (e) {</p> <p>Var L = E.Offsetleft;</p> <p>While (E = E.OffSetParent) {</p> <p>L = E.Offsetleft;</p> <p>}</p> <p>Return L;</p> <p>}</p> <p>Function GetAbstop (e) {</p> <p>VAR T = E.OffSettop;</p> <p>While (E = E.OffSetParent) {</p> <p>T = E.OffSettop;}</p> <p>Return T;</p> <p>}</p> <p></ script></p> <p></ Public: Component></p> <p>Should everyone, I found a space to pass the source file. Click to download</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-92082.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="92082" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.056</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'iiVlNh83gXR8keC6T4c8KkVtjmmYaWzMK6GmFn4uv063UPk6XdSEK_2FUK8HOus0auRmBqL05QaTqvAJCIJ911oA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>