列出源碼:求解
<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