【EasyUI篇】Menu菜单组件

微信公众号:程序yuan
关注可了解更多的教程。问题或建议,请公众号留言;
[如果你觉得Md2All对你有帮助,欢迎赞赏]

查看--> 全套EasyUI示例目录

14.Menu菜单组件

【EasyUI篇】Menu菜单组件_第1张图片

【EasyUI篇】Menu菜单组件_第2张图片

【EasyUI篇】Menu菜单组件_第3张图片

【EasyUI篇】Menu菜单组件_第4张图片

 

【EasyUI篇】Menu菜单组件_第5张图片

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Menu
    
    
    
    
    
    
    
    
    



    右击显示菜单
    







    点击显示菜单     点击关闭菜单     点击销毁菜单     获得DOM指定菜单项     点击修改文本     

    点击修改图标     通过名称获得指定节点     添加一个子项     移除一个子项     禁用一个菜单     启用一个菜单              新建
        <%--禁用菜单项--%>         <%--data-options="disabled:true,"--%>                      打开                              
Word
                
Excel
                
Powerpoint
            
        
        保存
        
<%--分割线--%>         
退出
    

JS文件

$(function () {
    //禁用系统自带的右击菜单
    // e.preventDefault();
    $("#box").menu({

        left:100,
        top:100,
        minWidth:200,
        //当鼠标离开菜单区域是隐藏,默认为true,
        hideOnUnhover:true,

//---------- 事件列表 ---------------

        onShow:function () {
            // alert("显示时触发");
        },
        onHide:function () {
            // alert("隐藏时触发");
        },
        onClick:function (item) {
            // alert("点击时触发:"+item.text);
        }

    });



    //返回属性对象
    console.log($('#box').menu('options'));
    //显示菜单


    $("#btn1").on('contextmenu',function (e) {
        //禁用系统自带的右击菜单
        e.preventDefault();
        $("#box").menu('show',{
            // left:e.pageX,
            // top:e.pageY,
        });
    });




    $("#btn2").click(function () {
        $('#box').menu('show',{
            left:0,
            top:0,
        });
    });
    $("#btn3").click(function () {
        $('#box').menu('hide');
    });

    $("#btn4").click(function () {
        $('#box').menu('destroy');
    });

    $("#btn5").click(function () {
        console.log($('#box').menu('getItem',$("#new")));
    });

    $("#btn6").click(function () {
        $('#box').menu('setText',{
            target: "#new",
            text:"请新建哦",
        });
    });

    $("#btn7").click(function () {
        $('#box').menu('setIcon',{
            target: "#new",
            iconCls:"icon-add",
        });
    });

    $("#btn8").click(function () {
        console.log($('#box').menu('findItem','新建'));
    });
    $("#btn9").click(function () {
        $('#box').menu('appendItem',{
            id:'cut',
            text:'剪切',
            iconCls:'icon-cut',
            onclick:function () {
                alert("点击事件");
            }
        });
    });
    $("#btn10").click(function () {
        $('#box').menu('removeItem','#cut');
    });

    $("#btn11").click(function () {
        $('#box').menu('disableItem','#cut');
    });

    $("#btn12").click(function () {
        $('#box').menu('enableItem','#cut');
    });

});

效果图

【EasyUI篇】Menu菜单组件_第6张图片

------------------------------------------------

关注小编微信公众号获取更多资源

你可能感兴趣的:(前端框架EasyUI)