程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 5、easyUI-菜單與按鈕,easyui-菜單按鈕

5、easyUI-菜單與按鈕,easyui-菜單按鈕

編輯:關於PHP編程

5、easyUI-菜單與按鈕,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">class="menu-sep"></div>
        <div>退出</div>
    </div>
    <!--結束 創建簡單的菜單-->
    
    <!--開始 創建鏈接按鈕(Link Button)-->
    <!--鏈接按鈕(Link Button)實則是使用 <a> 元素來創建的。
    所以實際上一個鏈接按鈕(Link Button)就是一個顯示為按鈕樣式的<a> 元素-->
    <div>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>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>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>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">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" >
        <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

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved