Discuz!X3.2 Ajax 操作详解及实例(三)：ajaxmenu() 与 showMenu()

bacy001

ajaxmenu() 与 showMenu() 都是 Discuz!X 前端页面用来显示菜单的。
两者的主要区别是：showMenu 中使用的菜单在 show 之前已经存在于前端页面中，仅仅是 css 的 display 属性为 'none' 而已；而 ajaxmenu() 中使用的菜单是先通过 ajaxget 从服务端获取菜单内容，然后使用 showMenu() 将菜单显示出来。

ajaxmenu() 与 showMenu() 用于在前端页面输出自定义菜单，两者的区别主要是：


showMenu 是具体负责显示菜单操作的函数，且要求菜单HTML代码（容器与内容）已经加载到页面，showMenu 只是根据参数将菜单在指定位置显示出来；而 ajaxmenu 则是动态在页面上创建菜单容器，然后通过 ajaxget 获取菜单内容并添加到容器中，最后再调用 showMenu 将菜单显示出来。


showMenu() 和 ajaxmenu() 参数众多，请参考资料：Discuz!X 通用JavaScript脚本(AJAX使用和弹层)

下文主要介绍应用实例，且实例运行环境请参考本系列教程的第一节，本节示例代码添加到主模板文件的适当位置即可。


1、实例一，当鼠标悬停在 A 标签上时，自动弹出菜单；
A 标签参考代码如下：

1. <a href="javascript:;" id="mouseover" onmouseover="showMenu({'ctrlid':'mouseover'});">
   
2.         Show Menu(MouseOver)
   
3. </a>
   

复制代码

下面是菜单代码：

1. <div id="mouseover_menu" class="p_pof upf" style="display:none; width: 100px; text-align:center;">
   
2.         <ul class="p_opt cl">
   
3.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option A</a></li>
   
4.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option B</a></li>
   
5.                 <hr class="da">
   
6.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option C</a></li>
   
7.         </ul>
   
8. </div>
   

复制代码

请注意一下几点：
1.1、菜单容器的 ID 值为 'mouseover_menu'，即 showMenu 只有一个参数 ctrlid 时，菜单的 ID 值就默认为： ctrlid + '_menu'；
1.2、菜单容器的 display 属性的初始值为 'none'，因此正常情况下菜单是不显示的，只有当鼠标悬停在控制元素（ID 为 ctrlid 的元素）上是，才会通过修改 display 属性的方法被展现出来；
1.3、Discuz!X 默认的菜单容器 CSS Class 为 'p_pof' 或者 'p_pop'，菜单内容的 CSS Class 为 'p_opt'，用户完全可以根据自己的需要自行定义；
1.4、如果需要将本例修改为鼠标点击才弹出菜单，则只需要修改 A 标签的 'onmouseover' 事件为 'onclick' 即可；


2、实例二，通过设置 layer 值实现二级或者多级菜单；
在上例菜单代码中增加一个菜单项用于展示二级菜单，参考代码如下：

1. <div id="mouseover_menu" class="p_pof upf" style="display:none; width: 100px; text-align:center;">
   
2.         <ul class="p_opt cl">
   
3.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option A</a></li>
   
4.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option B</a></li>
   
5.                 <hr class="da">
   
6.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Option C</a></li>
   
7.                 <li><a href="javascript:;" id="l2_mouseover" onmouseover="showMenu({'ctrlid':'l2_mouseover','layer':'2'});">Lv2 Menu</a></li>
   
8.         </ul>
   
9. </div>
   

复制代码

同时，增加二级菜单代码，参考代码如下：

1. <div id="l2_mouseover_menu" class="p_pof upf" style="display:none; width: 100px; text-align:center;">
   
2.         <ul class="p_opt cl">
   
3.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Lv2 A</a></li>
   
4.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Lv2 B</a></li>
   
5.                 <hr class="da">
   
6.                 <li><a href="javascript:;" onclick="alert(this.innerHTML);">Lv2 C</a></li>
   
7.         </ul>
   
8. </div>
   

复制代码

代码说明：实现二级菜单的关键是使用 showMenu 函数时需要定义 'layer' 的值，showMenu 通过 layer 值来设置多级菜单的层叠效果，layer 大的菜单将显示在最上面。


本节完