HT 菜单手册

索引


概述

ht.widget.Menu可以为页面增加标准菜单,由一个列表ulContextMenu组成,借助ContextMenu可以实现任意层次子菜单, 图片ICONCheck多选,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如下:

菜单的内容由一个固定格式的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://wtsoftware.cn", //超链到某个URL
                linkTarget: "_blank", //超链目标,默认_self
                key: [Key.meta, Key.enter], //实际响应的快捷键
                suffix: "Command+Enter", //在菜单上显示的提示文字
                preventDefault: false //是否阻止快捷键默认的行为,默认为true
            },
            {
                label: "submenu",
                action: function(item) {
                    alert(item.label);
                }
            }
        ]
    }
];

这个JSON对象渲染出来的菜单见下例:

自定义菜单样式(模拟Win7)

和右键菜单类似,菜单支持通过全局的htconfig配置风格样式,可配置的参数如下:

除了htconfig对象,也可以使用css覆盖默认的风格,请参考下面的例子:

调用API显示下拉菜单

通常下拉菜单通过点击触发显示即可,除此之外,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, 对于一个附带标准菜单的应用,通常需要将菜单放置到页面顶部,然后用其它组件填满剩下的区域,我们接下来模拟这样的功能:


欢迎交流 service@hightopo.com