discuz如何使用内置弹出菜单showMenu

[复制链接]
树苗收集系 发表于 2019-11-23 20:08:17 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
discuz内置了很多弹出效果,这里说下showMenu()
用showMenu的时候比较简单
[code]<a id="profile" onclick="showMenu({'ctrlid':'profile','pos':'43!','cache':'1'})" hidefocus="true">菜单</a>
<div id="profile_menu" style="display: none;margin-left: -45px;">菜单内容</div>
[/code]这里需要记录的:
1.onclick=showMenu点击弹出移开隐藏。
2.参数:ctrlid,控制菜单的id,会控制以此id_menu命名的容器显隐,可以加menuid参数以定义显示菜单的id        ,具体最后列出。
3.定位:需要特别注意的是,这个效果弹出的容器是以body左上角作为基点,不能放在其他相对定位的元素里,否则错位。而且默认有超出边界会动态调整效果(如:在按钮的右下角弹出时若超出屏幕,则会自动调整为左下角弹出以免看不到内容),位置参数pos,在数字后面加了!是禁止调整。
4.因为在应用的时候我的菜单是ajax load进来的,所以加了个cache(缓存),貌似想错了没效果还是每次弹出都重新load内容。
5.弹出容器profile_menu设置默认隐藏,且我的弹出容器较宽,希望相对按钮在下方居中,所以添加了左移45px,这也是为什么设置pos禁止动态调整弹出方向的原因。
6.发现个问题,在<a>里使用font-awesome的<i class="fa fa-xxx"></i>点击无效,class可加到<a>行里。

function showMenu(v)
参数 v 格式:{'key1':'value1','key2':'value2','key3':'value3'}
目前,数组 v 支持传递的 key 有:

[table]
[tr][td=120][align=center][b]key[/b][/align][/td][td=230][align=center][b]默认值[/b][/align][/td][td=250][b]含义[/b]        [/td][td][b]可选值及解释[/b]        [/td][/tr]
[tr][td][align=center]ctrlid[/align][/td][td][align=center](必填)[/align][/td][td]控制菜单的 id        [/td][td]        
[/td][/tr]
[tr][td][align=center]showid[/align][/td][td][align=center]ctrlid[/align][/td][td]弹出菜单的 id        [/td][td]        
[/td][/tr]
[tr][td][align=center]menuid[/align][/td][td][align=center]showid + '_menu'[/align][/td][td]显示菜单的 id        [/td][td]        
[/td][/tr]
[tr][td][align=center]evt[/align][/td][td][align=center]'mouseover'[/align][/td][td]响应函数的事件        [/td][td]click: ctrlObj 的 onclick 触发mouseover: ctrlObj 的 onmouseover 触发
[/td][/tr]
[tr][td][align=center]pos[/align][/td][td][align=center]'43'[/align][/td][td]菜单弹出位置及方向,必须是字串类型格式"BD",B 为基点 D 为方向。方向设定后,函数会根据实际弹出的位置及浏览器窗口大小进行二次调整,取消二次调整请以"!"结尾表示强制
   [/td][td]BD:自定义
B:        D:
1:左上角  1:左上方
2:右上角  2:右上方
3:右下角  3:右下方
4:左下角  4:左下方
00:屏幕居中
不需要设置位置
[/td][/tr]
[tr][td][align=center]layer[/align][/td][td][align=center]1[/align][/td][td]菜单层级        [/td][td]大于 0 的任意整数        [/td][/tr]
[tr][td][align=center]duration[/align][/td][td][align=center]2[/align][/td][td]菜单显示方式        [/td][td]3:菜单一直显示,除非执行 hideMenu(),或者页面 unload2:鼠标移开 ctrlObj 及 menuObj 即开始计时 timeout 毫秒后消失
1:鼠标移开 ctrlObj 即开始计时 timeout 毫秒后消失
0:菜单显示即开始计时 timeout 毫秒后消失
[/td][/tr]
[tr][td][align=center]timeout[/align][/td][td][align=center]250[/align][/td][td]菜单持续时间        [/td][td]单位:毫秒        [/td][/tr]
[tr][td][align=center]mtype[/align][/td][td][align=center]'menu'[/align][/td][td]菜单类型        [/td][td]menu:普通菜单win:浮窗
prompt:提示信息
dialog:对话框
[/td][/tr]
[tr][td][align=center]maxh[/align][/td][td][align=center]600[/align][/td][td]菜单最大高度,实际高度超过 maxh 时菜单将出现垂直滚动条        [/td][td]        
[/td][/tr]
[tr][td][align=center]cache[/align][/td][td][align=center]1[/align][/td][td]是否缓存菜单        [/td][td]1:是0:否
[/td][/tr]
[tr][td][align=center]drag[/align][/td][td]
[/td][td]拖拽菜单对象的 id,如果希望整个菜单都可以拖拽 请设置 drag 等于1[/td][td]        
[/td][/tr]
[tr][td][align=center]fade[/align][/td][td][align=center]0[/align][/td][td]淡入淡出效果        [/td][td]1:是0:否
[/td][/tr]
[tr][td][align=center]cover[/align][/td][td][align=center]0[/align][/td][td]是否显示一个遮罩覆盖整个页面        [/td][td]1:是0:否
[/td][/tr]
[tr][td][align=center]zindex[/align][/td][td][align=center]JSMENU['zIndex']['menu'][/align][/td][td]菜单层叠顺序        [/td][td]        
[/td][/tr]
[tr][td][align=center]ctrlclass[/align][/td][td]
[/td][td]控制对象在菜单弹出后的 class 值,duration = 2 时有效[/td][/tr]
[/table]
回复

使用道具 举报

精彩评论2

小悲小欢小流年 发表于 2021-3-6 18:36:30 | 显示全部楼层
学习一下!十分感谢
回复

使用道具 举报

青栀琉璃裙 发表于 2022-6-18 17:04:43 | 显示全部楼层
看帖子的要发表下看法
回复

使用道具 举报

发布主题
推荐阅读 更多
阅读排行 更多
广告位
全国统一客服电话
400-1234-5678

24x7小时免费咨询

  • 官方在线客服

    QQ客服:小西

    点击交谈

    QQ客服:良子

    点击交谈

    QQ客服:闵月

    点击交谈
  • 安徽省合肥市高新区创新产业园

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方微信

    加入官方微信群