EasyUI menu

我会带着你远行 2022-04-25 03:30 170阅读 0赞

## class ##

`easyui-menu` 菜单(内部可嵌套多个、多层菜单项menu-item)  
`menu-item` 菜单项  
`menu-sep` 菜单分割(在两个菜单项之间分割)

## props ##

<div id="m">
        <div id="New">New</div>
        <div id="Save">Save</div>
        
        <div id="Edit">
            <span>Edit</span>
            <div>
                <div>Add</div>
                <div>Cut</div>
            </div>
        </div>
        <div class="menu-sep"></div>
        <div id="Exit" data-options="iconCls:'icon-save', href:'#', disabled: false">Exit</div>
    </div>
    <script>
        $("#m").menu({
            hideOnUnhover: false,
            onClick: function(item) {
                console.log(item);
                $("#m").menu("show");
            }
        });
        $("#m").menu("show");
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]

## API ##

*  操作`item`(即jQuery对象 `menu-item`)。
    
     *  根据`text`值查找菜单项`findItem`
    
        var Exit = $("#m").menu("findItem", "Exit");
    
     *  设置|更新 菜单项的文本`setText`
    
        $("#m").menu("setText", {
            target: Exit.target,
            text: "结束"
        });
    
     *  设置|更新 菜单项的图标`setIcon`
    
        $("#m").menu("setIcon", {
            target: Exit.target,
            iconCls: "icon-ok"
        });
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]
    
     *  新增菜单项`appendItem`
     *  新增菜单项分割
    
        $("#m").menu("appendItem", {
            seperator: true
        });
    
     *  新增菜单项(可指定父元素)
    
        $("#m").menu("appendItem", {
            text: "新菜单项",
            iconCls: "icon-new",
            href: "#",
            parent: $("#m").menu("findItem", "New").target
        });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]

*  操作`itemEI`(即DOM元素，`item.target`就是菜单项对象对应的DOM元素。)。
    
     *  获取菜单项`getItem` `$(selector).menu("getItem", itemEI);`
    
        var obj = $("#m").menu("findItem", "Save");
        var Save = $("#m").menu("getItem", obj.target);
        console.log(Save);
    
     *  删除菜单项`removeItem` `$(selector).menu("removeItem", itemEI);`
    
        setTimeout(function() {
            $("#m").menu("removeItem", obj.target);
        }, 1000);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 3]

## code ##

我使用的jquery和easyui是本地依赖。可以替换为自己的。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
        
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="/resources/jquery-easyui-1.7.0/themes/icon.css">
        
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="/resources/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
    
        <title>菜单 easyui-menu</title>
    </head>
    <body>
    
    
    
    
    <div id="m">
        <div id="New">New</div>
        <div id="Save">Save</div>
        
        <div id="Edit">
            <span>Edit</span>
            <div>
                <div>Add</div>
                <div>Cut</div>
            </div>
        </div>
        <div class="menu-sep"></div>
        <div id="Exit" data-options="iconCls:'icon-save', href:'#', disabled: false">Exit</div>
    </div>
    <script>
        $("#m").menu({
            hideOnUnhover: false,
            onClick: function(item) {
                console.log(item);
                $("#m").menu("show");
            }
        });
        $("#m").menu("show");
    
        // 获取菜单项：Exit
        var Exit = $("#m").menu("findItem", "Exit");    // item是一个jQuery对象
        console.log(Exit);
        // 修改文本
        $("#m").menu("setText", {
            target: Exit.target,
            text: "结束"
        });
        // 修改图标
        $("#m").menu("setIcon", {
            target: Exit.target,
            iconCls: "icon-ok"
        });
        // 新增菜单项
        $("#m").menu("appendItem", {
            text: "新菜单项",
            iconCls: "icon-new",
            href: "#",
            parent: $("#m").menu("findItem", "New").target
        });
    
        // 根据DOM元素获取菜单项对象
        var obj = $("#m").menu("findItem", "Save");
        var Save = $("#m").menu("getItem", obj.target);
        console.log(Save);
    
        // 移除菜单项对象
        setTimeout(function() {
            $("#m").menu("removeItem", obj.target);
        }, 1000);
        
    </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220210/001caad971694861927b9e7d94d85c53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]: /images/20220210/f26386942a7549d689d204a2d311a308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]: /images/20220210/d80798610cfd49f389bbaa23a8a8726c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 3]: /images/20220210/fc36fee1933d45b48e8bb1ae724bdd04.png