javascript - 通过 AJAX 加载子菜单项的 HTML/javascript 上下文菜单

Question

有谁知道支持回调的 HTML/JavaScript/jQuery 上下文菜单实现，允许我通过 AJAX 加载顶级菜单项和子菜单项？

我需要支持非常动态的上下文菜单，其中可用菜单项由权限、数据访问权限和数据字典关系决定。我无法预先创建菜单项，因为菜单结构的项目和深度是在运行时确定的。

我特别想知道新的 iPod style menu 是不是正在为 jQuery 1.9 开发将支持动态 AJAX 加载，因为这种菜单样式非常适合我们的要求。

谢谢。 格伦。

Answer 1

试试这个:

http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

易于实现和维护。

编辑:

您可以通过给 UL 一个 ID 来动态访问您的菜单:

<ul id="contextmenuid">
    /*Empty menu to be created dynamically*/
</ul> 

然后使用 javascript，您可以访问此 UL 并创建/修改所需的 LI:

var contextMenu = document.getElementById(contextmenuid);

//This part would be dynamic loop to add menu items
var contextMenuItem = document.createElement('li');
var contextMenuItemLink = document.createElement('a');

contextMenuItem.setAttribute('class', 'imageclass');        //imageclass will be used to show the menu item image
contextMenuItemLink.setAttribute('href', '#doaction');      //#doaction is the item ID, it would be number
contextMenuItemLink.setAttribute('title', 'Tooltip Info');  //Tooltip
contextMenuItemLink.innerHTML = 'Dynamic Item, click me...';//Menu item text
contextMenuItem.appendChild(contextMenuItemLink);

//Add the new menu item to the context menu
contextMenu.appendChild(contextMenuItem);

子菜单也是如此:

<ul id="contextmenuid">
    <li><a href="http://msn.com">MSN</a>
        <ul id="contextsubmenuid">
            /*to be created dynamically*/
        </ul>
    </li>
</ul> 

关于样式，我想您可以使用 CSS 来获得您需要的东西。

希望这会有所帮助。