用showMenu的时候比较简单
这里需要记录的:
1.οnclick=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 有:
[代码]php代码:
1 | <a id= "profile" onclick= "showMenu({'ctrlid':'profile','pos':'43!','cache':'1'})" hidefocus= "true" >菜单</a> |
2 | <div id= "profile_menu" style= "display: none;margin-left: -45px;" >菜单内容</div> |
1.οnclick=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 时有效 |