discuz 内置弹出菜单showMenu-建站技术-魔趣建站-我们共同的建站资源共享平台！

discuz 内置弹出菜单showMenu [复制链接]

moqu8 2018-4-11

discuz内置了很多弹出效果，这里说下showMenu()
用showMenu的时候比较简单

<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>

复制代码

这里需要记录的：
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 有：

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