请选择 进入手机版 | 继续访问电脑版

Bacysoft.cn

 找回密码
 邀请注册
查看: 4227|回复: 0

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

[复制链接]
发表于 2015-9-9 21:43:19 | 显示全部楼层 |阅读模式
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 大的菜单将显示在最上面。


本节完
您需要登录后才可以回帖 登录 | 邀请注册

本版积分规则



阿里云|腾讯云|联系方式|Bacysoft.cn ( 京ICP备08000958号-1 )

GMT+8, 2019-10-19 09:48 , Processed in 0.018074 second(s), 23 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表