easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>5、easyui 菜单与按钮</title> <link type="text/css" href=""> <link type="text/css" href=""> <link type="text/css" href=""> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></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> <div>新建</div> <div> <span>打开</span> <div> <div>Word</div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div data-options="iconCls:'icon-save'">保存</div> <div></div> <div>退出</div> </div> <!--结束 创建简单的菜单--> <!--开始 创建链接按钮（Link Button）--> <!--链接按钮（Link Button）实则是使用 <a> 元素来创建的。 所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的<a> 元素--> <div> <a href="#" iconCls="icon-cancel">Cancel</a> <a href="#" iconCls="icon-reload">Refresh</a> <a href="#" iconCls="icon-search">Query</a> <a href="#">text button</a> <a href="#" iconCls="icon-print">Print</a> </div> <!--加上属性plain="true"其实就是去除按钮样式如图--> <div> <a href="#" plain="true" iconCls="icon-cancel">Cancel</a> <a href="#" plain="true" iconCls="icon-reload">Refresh</a> <a href="#" plain="true" iconCls="icon-search">Query</a> <a href="#" plain="true">text button</a> <a href="#" plain="true" iconCls="icon-print">Print</a> </div> <!--如果要禁用按钮只需要执行$(selector).linkbutton('disable');--> <div> <a href="#" iconCls="icon-cancel">Cancel</a> <a href="#" iconCls="icon-reload">Refresh</a> <a href="#" iconCls="icon-search">Query</a> <a href="#">text button</a> <a href="#" iconCls="icon-print">Print</a> </div> <!--结束 创建链接按钮（Link Button）--> <!--开始 创建菜单按钮（Menu Button）--> <div> <a href="javascript:void(0)" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a> <a href="#" iconCls="icon-help" menu="#mm2">help</a> </div> <div menuAlign="left"> <div data-options="iconCls:'icon-undo'">Undo</div> <div data-options="iconCls:'icon-redo'">Redo</div> <div></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div></div> <div data-options="iconCls:'icon-remove'">Delete</div> <div>Select All</div> </div> <div> <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