使用 JavaScript 的菜单和子菜单

• 下载示例 - 1.05 KB

引言

以下代码示例使用简单的 JavaScript 在 HTML 中创建弹出式菜单和子菜单。但是，这种方法与我在互联网上找到的各种开源代码略有不同。

我认为与本文相关的关键字包括：菜单、JavaScript 弹出菜单、菜单和子菜单、window.createpopup、div 样式菜单、无工具栏窗口、无菜单栏窗口、父窗口、子窗口、祖父窗口和 DHTML 弹出窗口。

背景

我希望将一段在用户窗口上显示几个菜单按钮的代码移植到单击单个按钮时显示的弹出式菜单和子菜单中。这促使我尝试使用诸如 div 标签、工具提示样式弹出窗口、window.open，最后是 window.createpopup 之类的选项。

与 div 标签相比，使用 window.createpopup 即使父窗口缩小/调整到小屏幕区域，也能显示菜单和子菜单，也就是说，菜单和子菜单将显示在当前父浏览器窗口的边界之外，而不受当前浏览器窗口大小/区域的限制。

使用代码

注意：目前，Mozilla Firefox 浏览器的任何版本都不存在这样的 JavaScript 对象/方法。只有 IE/Opera 浏览器具有此功能。

无需进一步延迟，以下是包含适当注释的简单方法的代码片段。但是，为了使菜单和子菜单获得更好的外观和感觉，还需要进行更多的装饰。我的意思是，innerHTML 可以采用表格 HTML 标签的代码。

<table>
    <tr><td>item1</td></tr>
    <tr><td>item2</td></tr> 
</table> 

// Code example.

<script language="javascript">

// Create a new javascript object to manage menu & submenu. 
// Pass reference to window object.
window.myobj = new Object();

// function which will be called from main browser window.
function showfunction() 
{
    var offsetWidth = 100; 
    var offsetHeight = 60;

    // Menu popup reference stored in window object's variable p.
    window.p = window.createPopup();

    //string substitution for Menu contents.This could be a document or 
    // body tags from HTML. Done to avoid parsing double quote problems.
    p.document.body.innerHTML = strMenu; 
    p.document.body.style.border = 'solid windowframe 1px';
    p.show(screenLeft + 99,screenTop + 25,200,65);
}

// variable to hold innerHTML of Menu Popup. 
var strMenu ="<b onclick=\"( ";
strMenu += window.myobj.myFunctionObj;  // using object as function.
strMenu += ")()\">Hello World! I am Menu popup.</b>";

// function defined which is part of menu popup innerHTML.
myobj.myFunctionObj= function(){

    // Now create sub menu popup as part of menu's innerHTML.
    // Sub Menu popup reference stored in window object's variable.
    window.l = window.createPopup();

    // We use string substitution to enable parsing of double 
    // quotes present in innerHTML. 
    l.document.body.innerHTML = parent.window.strSubMenu;
    l.document.body.style.border = 'solid windowframe 1px';
    l.show(screenLeft+200,screenTop + 45,200,50);

};

// similar string substitution and function object 
// usage for sub menu.
var strSubMenu ="<b onclick=\"( ";
strSubMenu +=  window.myobj.myFunctionObjSub;
strSubMenu += ")()\">I am the sub Menu popup.</b>";

var strCloseWindow = "parent.window.parent.window.close();"; 
var strAlterDiv = "parent.parent.document.
getElementById('div1').innerHTML = 'New div tag text.'";   

// function assigned to object for parsing during creation of sub menu.
myobj.myFunctionObjSub = function(){
       
    // How do we access main window vaiables?
    //action alter of Div tag.
    eval(parent.window.parent.window.strAlterDiv);   
    
    //action closing of grandpa window i.e. browser window.
    eval(parent.window.parent.window.strCloseWindow);
    };

</script>
</HEAD>

Some text Some text Some text Some text Some tex....Some more text.
<input type="button" name="btn1" value="Click Me Image Btn" 
                           onclick="javascript:showfunction();">
<div id="div1" style="width=200px; height=100px; padding:4px ;"> 
    This div element shall be altered on click of submenu item.
</div>

关注点

现在，有一个值得思考的问题：由于菜单和子菜单的引用在 window 对象中可用，我们是否可以尝试在不调用菜单对象引用的 Show 方法的情况下弹出/显示子菜单？ 试试看！