5、easyUI-菜单与按钮

列出源码：求解

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>5、easyui 菜单与按钮</title>
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../ui/jquery-easyui-1.4.5/themes/color.css">
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script src="../../../ui/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../js/crud/bus_pubuser.js"></script>
    <script>
        $(function(){
            $(document).bind('contextmenu',function(e){
                $('#mm').menu('show', {
                    left : e.pageY,
                    top :  e.pageX
                    
                });
                return false;
            });
        });
        
    </script>
    <script>
        $(function(){
            $(".dsbtn").linkbutton('disable');
        });
    
    </script>
</head>
<body>
    <!--开始 创建简单的菜单-->
    <!--菜单默认是不显示的 需要在javascript中调用显示-->
    <div id="mm" class="easyui-menu" style="width: 150px;height: 120px;">
        <div>新建</div>
        <div>
            <span>打开</span>
            <div style="width:150px;height: 120px;">
                <div>Word</div>
                <div>Excel</div>
                <div>PowerPoint</div>
            </div>
        </div>
        <div data-options="iconCls:'icon-save'">保存</div>
        <div class="menu-sep"></div>
        <div>退出</div>
    </div>
    <!--结束 创建简单的菜单-->
    
    <!--开始 创建链接按钮（Link Button）-->
    <!--链接按钮（Link Button）实则是使用 <a> 元素来创建的。
    所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的<a> 元素-->
    <div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
        <a href="#" class="easyui-linkbutton">text button</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
    </div>
    <!--加上属性plain="true"其实就是去除按钮样式如图-->
    <div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
        <a href="#" class="easyui-linkbutton" plain="true">text button</a>
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
    </div>
    <!--如果要禁用按钮只需要执行$(selector).linkbutton('disable');-->
    <div style="padding:5px;background:#fafafa;width:380px;border:1px solid #ccc">
        <a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-cancel">Cancel</a>
        <a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-reload">Refresh</a>
        <a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-search">Query</a>
        <a href="#" class="easyui-linkbutton dsbtn">text button</a>
        <a href="#" class="easyui-linkbutton dsbtn" iconCls="icon-print">Print</a>
    </div>
    <!--结束 创建链接按钮（Link Button）-->
    
    <!--开始 创建菜单按钮（Menu Button）-->
    <div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
        <a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>   
        <a href="#" iconCls="icon-help" class="easyui-menubutton" menu="#mm2">help</a>
    </div>
    <div id="mm" style="width:150px;height: 180px;" menuAlign="left">   
        <div data-options="iconCls:'icon-undo'">Undo</div>   
        <div data-options="iconCls:'icon-redo'">Redo</div>   
        <div class="menu-sep"></div>   
        <div>Cut</div>   
        <div>Copy</div>   
        <div>Paste</div>   
        <div class="menu-sep"></div>   
        <div data-options="iconCls:'icon-remove'">Delete</div>   
        <div>Select All</div>   
    </div> 
    <div id="mm2" class="menu-bottom" style="position: absolute; width:100px;height:100px;">
        <div>Help</div>
        <div>Update</div>
        <div>About</div>
    </div>
    <!--结束 创建菜单按钮（Menu Button）-->
</body>
<html>

问题1：右键点击按钮出现菜单，但是并没有屏蔽window自带的右键菜单，去除<!--开始 创建链接按钮（Link Button）-->之后的代码，屏蔽了window自带右键菜单，但是并没有在点击的时候的边上，而是在最顶部；

问题2：如果没有设置height属性，并不自动识别高度，如下图：

问题3：如下图，菜单按钮会显示在上方，而不是显示在下方，而且也存在不设置高度的话，不会自定识别高度

这些问题，是easyui框架本身的bug么，还是设置属性出现问题，使用的easyui版本是1.4.5

 

posted on 2016-07-12 22:49  EthanCoco  阅读(2718)  评论(0)  编辑  收藏  举报

导航