索引
ht.widget.Menu可以为页面增加标准菜单，由一个列表ul和ContextMenu组成，借助ContextMenu可以实现任意层次子菜单，
图片ICON，Check多选，Radio单选，禁用菜单项以及自定义菜单样式等功能，ContextMenu的详细介绍可以参考其文档。
在正式使用API之前，您的页面里应该引入相关的js文件：
<script src="ht.js"></script> <!--先引入ht.js-->
<script src="key.js"></script> <!--快捷键常量，可以按需引入-->
<script src="ht-contextmenu.js"></script> <!--依赖contextmenu-->
<script src="ht-menu.js"></script>Menu提供的API如下：
setItems(json)设置菜单项，参数为JSON对象setLayout(layout) 设置布局方式，largeicons表示大图标模式，smallicons表示小图标模式，iconsonly表示仅图标模式setHeaderItemHGap() 设置根菜单项的水平间隔，默认为0，改变layout时可以调整此参数以达到最好的展示效果setHeaderItemVGap() 设置根菜单项的垂直间隔，默认为0，改变layout时可以调整此参数以达到最好的展示效果setHeaderItemAlign() 设置根菜单项的对齐方式，默认为left，改变layout时可以调整此参数以达到最好的展示效果addTo(dom)参数为HTML元素，将菜单作为其childdispose()销毁此菜单enableGlobalKey() 启用全局快捷键，一旦启用此选项，菜单不再使用时需要显式调用dispose()销毁菜单disableGlobalKey() 禁用全局快捷键setHoverBackground(color) 设置鼠标划过根菜单时的背景色setHoverColor(color) 设置鼠标划过根菜单时的文字颜色showDropdownMenu(index)显示下拉菜单，参数为根菜单项的index，如要显示第一个根菜单项的下拉菜单，可以调用showDropdownMenu(0)hideDropdownMenu()隐藏下拉菜单getItemByProperty(property, value)查找属性名为property，值为value的菜单项，只返回第一个查找结果，注意：如果菜单显示时修改此查找结果，则菜单界面在下次显示时更新getShowingMenuIndex()获得当前显示下拉菜单的根菜单项的index，如果没有显示下拉菜单返回-1菜单的内容由一个固定格式的JSON对象描述，包括菜单项的文字，图片以及相应的动作，下面的JSON描述了一个典型菜单：
var json = [
{
label: "File", //菜单文字
items: [
{
label: "New...",
icon: iconSrc, //菜单图片ICON
action: function(item) { //回调函数
alert(item.label);
}
},
{
label: "Open...",
icon: iconSrc,
suffix: "Ctrl+O", //在菜单上显示的提示文字
key: [Key.ctrl, Key.o], //实际响应的快捷键
action: function(item) {
alert("you clicked:" + item.label + ",this=" + this);
},
scope: "hello" //指定回调函数中的this
},
{
label: "Disabled",
icon: iconSrc,
disabled: true //禁用菜单项
},
"separator", //分割线
{
label: "More...",
icon: iconSrc,
type: "check", //可多选的菜单项
items: [
{
label: "AAAA"
},
{
label: "BBBB"
},
{
label: "CCCC"
}
]
}
]
},
{
label: "Edit",
items:[
{
label: "Copy",
icon: iconSrc
},
{
label: "Paste",
icon: iconSrc
}
]
},
{
label: "CheckMenuItems",
items: [
{
label: "Check1",
icon: iconSrc,
type: "check"
},
{
label: "Check2",
icon: iconSrc,
type: "check"
},
{
label: "Check3",
icon: iconSrc,
type: "check",
items: [
{
label: "AAAA"
},
{
label: "BBBB"
},
{
label: "CCCC"
}
]
}
],
action: function(item) {
alert("you clicked:" + item.label + ",this=" + this);
}
},
{
label: "RadioMenuItems",
action: function(item,event) {
alert("you clicked:" + item.label);
},
items: [
{
label: "Radio1",
icon: iconSrc,
type: "radio",//单选菜单项
groupId: 1 //菜单项分组
},
{
label: "Radio2",
icon: iconSrc,
type: "radio",
groupId: 1
},
{
label: "Radio3",
icon: iconSrc,
type: "radio",
groupId: 1,
items: [
{
label: "AAAA"
},
{
label: "BBBB"
},
{
label: "CCCC"
}
]
}
]
},
{
label: "TestMenu",
icon: iconSrc,
action: function(item) {
alert(item.label);
},
items: [
{
label: "Homepage",
href: "http://www.hightopo.com", //超链到某个URL
linkTarget: "_blank", //超链目标，默认_self
key: [Key.meta, Key.enter], //实际响应的快捷键
suffix: "Command+Enter", //在菜单上显示的提示文字
preventDefault: false //是否阻止快捷键默认的行为，默认为true
},
{
label: "submenu",
action: function(item) {
alert(item.label);
}
}
]
}
];这个JSON对象渲染出来的菜单见下例：
和右键菜单类似，菜单支持通过全局的htconfig配置风格样式，可配置的参数如下：
menuLabelFont 菜单文字字体，默认为(isTouchable ? '16' : '13') + 'px arial, sans-serif',menuLabelColor 菜单文字颜色，默认为#000,menuBackground 菜单背景色，默认为#F0EFEEmenuHoverBackground 鼠标划过菜单项时的背景颜色，默认为#648BFEmenuHoverLabelColor 鼠标划过菜单项时的文字颜色，默认为#fffmenuSeparatorWidth 菜单底部分割线的宽度，默认为1menuSeparatorColor 菜单底部分割线的颜色，默认为#999除了htconfig对象，也可以使用css覆盖默认的风格，请参考下面的例子：
通常下拉菜单通过点击触发显示即可，除此之外，Menu也支持通过API控制显示和隐藏下拉菜单：
<input type="button" value="Show" onclick="window.menu.showDropdownMenu(document.getElementById('txt').value);">
<input type="button" value="Hide" onclick="window.menu.hideDropdownMenu();">
<input type="button" value="PrintIndex" onmousedown="alert(window.menu.getShowingMenuIndex());">通俗来说，单页应用是让用户在一个页面中完成所有的操作，它的介绍可以参考这里：Single-page application， 对于一个附带标准菜单的应用，通常需要将菜单放置到页面顶部，然后用其它组件填满剩下的区域，我们接下来模拟这样的功能：