5-1、easyUI-菜单与按钮(上节问题与解决)

首先把上节的代码copy过来，如下：

<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>

解决问题一：没有屏蔽window自带右键按钮。

首先：<!--开始 创建简单的菜单-->开始就是一个菜单按钮，与下面的<!--开始 创建菜单按钮（Menu Button）-->模块发生冲突，所以我们要去掉<!--开始 创建菜单按钮（Menu Button）-->模块，就好了；

但是出现了“并没有在点击的时候的边上，而是在最顶部“这个问题，奇葩的要死，首先看到最后一行，</body> <html>html没有关闭加上left : e.pageY, top : e.pageX写反了，应该是：left : e.pageX, top : e.pageY;

其次问题二中：（解决问题二，问题三）

“如果没有设置height属性，并不自动识别高度“

在这个问题之间先解决<!doctype html>这个问题：

 

下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法。

 

 

1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

 

 

  document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

 

 这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

 

    如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

 

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

所以加入之后，解决问题！！！！！！

 

附上最新源码：

<!doctype html>
<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.pageX,
                    top:  e.pageY
                    
                });
                return false;
            });
        });
        
    </script>
    <script>
        $(function(){
            $(".dsbtn").linkbutton('disable');
        });
    
    </script>
</head>
<body>
    <!--开始 创建简单的菜单-->
    <!--菜单默认是不显示的 需要在javascript中调用显示-->
    <div id="mm" class="easyui-menu" style="width: 150px;">
        <div>新建</div>
        <div>
            <span>打开</span>
            <div style="width:150px;">
                <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:'#mm1',iconCls:'icon-edit'">Edit</a>   
        <a href="#" iconCls="icon-help" class="easyui-menubutton" menu="#mm2">help</a>
    </div>
    <div id="mm1" style="width:150px;" 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;">
        <div>Help</div>
        <div>Update</div>
        <div>About</div>
    </div>
    <!--结束 创建菜单按钮（Menu Button）-->
</body>
</html>

 

posted on 2016-07-13 22:46  EthanCoco  阅读(644)  评论(0)  编辑  收藏  举报

导航