HT for Web Menu Manual

Index

Overview

ht.widget.Menu can be added to the standard menu for the page, composed of a list of ul and ContextMenu, with the help of ContextMenu can implement any level submenu, picture ICON, Check multiple selection, Radio single selection, disabling menu items and customizing menu styles can refer to their documentation for a detailed description of ContextMenu. Before you formally use API, you should introduce relevant js files on your page:

<script src="ht.js"></script> <!-- Intorduce ht.js first -->
<script src="key.js"></script> <!-- Shortcut key constants, you can introduce-on demand -->
<script src="ht-contextmenu.js"></script> <!-- Relay on contextmenu-->
<script src="ht-menu.js"></script>

Menu provides the API as follows:

The contents of the menu are described by a fixed format JSON object that includes the text of the menu item, the picture, and the corresponding action, and the following JSON describes a typical menu:

var json = [
    {
        label: "File", //Menu label
        items: [
            {
                label: "New...",
                icon: iconSrc, //Menu ICON
                action: function(item) { //Callback function
                    alert(item.label);
                }
            },
            {
                label: "Open...",
                icon: iconSrc,
                suffix: "Ctrl+O", //Tooltip displays in menu
                key: [Key.ctrl, Key.o], //Shortcut key for actual response
                action: function(item) {
                    alert("you clicked:" + item.label + ",this=" + this);
                },
                scope: "hello" //Specify this in the callback function
            },
            {
                label: "Disabled",
                icon: iconSrc, 
                disabled: true //Disable menu item
            },
            "separator", //Split Line
            {
                label: "More...",
                icon: iconSrc,
                type: "check", //Multiple-choice menu item
                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",//Radio menu item
                groupId: 1 //Menu grouping
            },
            {
                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", //Hyperlink to a URL
                linkTarget: "_blank", //Hyperlink target, default _self
                key: [Key.meta, Key.enter], //Shortcut key for the actual response
                suffix: "Command+Enter", //Tooltop displayed on the menu
                preventDefault: false //Whether to prevent shortcut key default behavior, default is true
            },
            {
                label: "submenu",
                action: function(item) {
                    alert(item.label);
                }
            }
        ]
    }
];

This JSON object renders the menu, see the following example:

Cutomize Menu Style (Win7 Style)

Similar to the right-click menu, the menu supports the global htconfig configuration style and configurable parameters as follows:

In addition to the htconfig object, you can also use css to override the default style, refer to the following example:

Single Page Application

Usually the drop-down menu is clicked to trigger the display, in addition, Menu also supports the display and hide drop-down menu through API control:

<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

In common, a single-page application allows the user to complete all the operations on a single page, and its introduction can be referenced here: Single-Page Application, for an application that comes with a standard menu, you usually need to place the menu at the top of the page and then fill the rest of the area with other components, and we'll simulate the following features:

Welcome to contact us service@hightopo.com