碼上快樂

相關內容    簡體    繁體

菜單和按鈕-EasyUI Menu 菜單、EasyUI Linkbutton 鏈接按鈕、EasyUI Menubutton 菜單按鈕、EasyUI Splitbutton 分割按鈕

本文轉載自   查看原文   2017-07-04 10:48   1533    jquery easyui

EasyUI Menu 菜單

通過 $.fn.menu.defaults 重寫默認的 defaults。

菜單（Menu）通常用於上下文菜單。它是創建其他菜單組件（比如：menubutton、splitbutton）的基礎組件。它也能用於導航和執行命令。

用法

創建菜單（Menu）

通過標記創建菜單（menu）應該添加 'easyui-menu' class 到 <div> 標記。每個菜單項（menu item）通過 <div> 標記創建。我們可以添加 'iconCls' 屬性到菜單項（menu item），以定義一個顯示在菜單項（menu item）左邊的圖標。添加 'menu-sep' class 到菜單項（menu item）將產生一個菜單（menu）分隔符。

<div id="mm" class="easyui-menu" style="width:120px;">
    <div>New</div>
    <div>
        <span>Open</span>
        <div style="width:150px;">
            <div><b>Word</b></div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">Save</div>
    <div class="menu-sep"></div>
    <div>Exit</div>
</div>

編程創建菜單（menu）並偵聽 'onClick' 事件。

$('#mm').menu({
    onClick:function(item){
        //...
    }
});

顯示菜單（Menu）

當菜單（menu）被創建時，它是隱藏不可見的。調用 'show' 方法來顯示菜單（menu）。

$('#mm').menu('show', {
    left: 200,
    top: 100
});

菜單項

菜單項（menu item）代表一個顯示在菜單中的單獨的項目。它包含下列屬性：

名稱 類型 描述 默認值
id string 菜單項（menu item）的 id 屬性。  
text string 項目文本。  
iconCls string 在項目左邊顯示一個 16x16 圖標的 CSS class。  
href string 當點擊菜單項（menu item）時設置頁面位置。  
disabled boolean 定義是否禁用菜單項（menu item）。 false
onclick function 當點擊菜單項（menu item）時被調用的函數。  

菜單屬性

名稱 類型 描述 默認值
zIndex number 菜單（Menu）的 z-index 樣式，從它開始增加。 110000
left number 菜單（Menu）的左邊位置。 0
top number 菜單（Menu）的頂部位置。 0
minWidth number 菜單（Menu）的最小寬度。該屬性自版本 1.3.2 起可用。 120
hideOnUnhover boolean 如果設置為 true，當鼠標離開它時自動隱藏菜單（menu）。該屬性自版本 1.3.5 起可用。 true

菜單事件

名稱 參數 描述
onShow none 當菜單（menu）顯示之后觸發。
onHide none 當菜單（menu）隱藏之后觸發。
onClick item 當點擊菜單項（menu item）時觸發。下面的實例演示如何處理所有菜單項點擊：
  1. <div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
  2. <div data-options="name:'new'">New</div>
  3. <div data-options="name:'save',iconCls:'icon-save'">Save</div>
  4. <div data-options="name:'print',iconCls:'icon-print'">Print</div>
  5. <div class="menu-sep"></div>
  6. <div data-options="name:'exit'">Exit</div>
  7. </div>
  8. <script type="text/javascript">
  9. function menuHandler(item){
  10. alert(item.name)
  11. }
  12. </script>

菜單方法

名稱 參數 描述
options none 返回選項（options）對象。
show pos 在指定的位置顯示菜單（menu）。
pos 參數有兩個屬性：
left：新的左邊位置。
top：新的頂部位置。
hide none 隱藏菜單（menu）。
destroy none 銷毀菜單（menu）。
getItem itemEl 獲取包含 'target' 屬性（指示項目 DOM 元素）的菜單項（menu item）屬性。下面的實例演示如何通過 id 獲取指定的項目：
  1. <div id="mm" class="easyui-menu" style="width:120px">
  2. <div>New</div>
  3. <div id="m-open">Open</div>
  4. <div>Save</div>
  5. </div>
  6.  
  7. var itemEl = $('#m-open')[0]; // the menu item element
  8. var item = $('#mm').menu('getItem', itemEl);
  9. console.log(item);
setText param 給指定的菜單項（menu item）設置文本。'param' 參數包含兩個屬性：
target：DOM 對象，被設定的菜單項（menu item）。
text：string，新的文本值。

代碼實例：
  1. var item = $('#mm').menu('findItem', 'Save');
  2. $('#mm').menu('setText', {
  3. target: item.target,
  4. text: 'Saving'
  5. });
setIcon param 給指定的菜單項（menu item）設置圖標。'param' 參數包含兩個屬性：
target：DOM 對象，即菜單項（menu item）。
iconCls：新圖標的 CSS class。

代碼實例：
  1. $('#mm').menu('setIcon', {
  2. target: $('#m-open')[0],
  3. iconCls: 'icon-closed'
  4. });
findItem text 找到指定的菜單項（menu item），返回對象與 getItem 方法相同。
代碼實例：
  1. // find 'Open' item and disable it
  2. var item = $('#mm').menu('findItem', 'Open');
  3. $('#mm').menu('disableItem', item.target);
appendItem options 追加一個新的菜單項（menu item），'param' 參數指示新的項目屬性。默認情況下，新增的項目將作為頂級菜單項（menu item）。如需追加一個子菜單項，需設置 'parent' 屬性，用來指示已經有子項目的父項目元素。
代碼實例：
  1. // append a top menu item
  2. $('#mm').menu('appendItem', {
  3. text: 'New Item',
  4. iconCls: 'icon-ok',
  5. onclick: function(){alert('New Item')}
  6. });
  7. // append a menu separator
  8. $('#mm').menu('appendItem', {
  9. separator: true
  10. });
  11. // append a sub menu item
  12. var item = $('#mm').menu('findItem', 'Open'); // find 'Open' item
  13. $('#mm').menu('appendItem', {
  14. parent: item.target, // the parent item element
  15. text: 'Open Excel',
  16. iconCls: 'icon-excel',
  17. onclick: function(){alert('Open Excel')}
  18. });
removeItem itemEl 移除指定的菜單項（menu item）。
enableItem itemEl 啟用菜單項（menu item）。
disableItem itemEl 禁用菜單項（menu item）。

EasyUI Linkbutton 鏈接按鈕

通過 $.fn.linkbutton.defaults 重寫默認的 defaults。

鏈接按鈕（linkbutton）用於創建一個超鏈接按鈕。它是一個正常的 <a> 標記的表示。它可顯示圖標和文本，或者僅僅顯示圖標和文本中的一個。按鈕寬度可動態收縮/擴展以適應其文本標簽。

用法

創建鏈接按鈕（linkbutton）

從標記創建鏈接按鈕（linkbutton）更容易。

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

編程創建鏈接按鈕（linkbutton）也是允許的。

<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({
    iconCls: 'icon-search'
});

處理鏈接按鈕（linkbutton）上的點擊。

鏈接按鈕（linkbutton）上的點擊將把用戶引導到其他頁面。

<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

下面的實例將警告一個消息。

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
    onclick="javascript:alert('easyui')">easyui</a>

使用 jQuery 綁定 click 處理程序。

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
$(function(){
    $('#btn').bind('click', function(){
        alert('easyui');
    });
});

屬性

名稱 類型 描述 默認值
id string 該組件的 id 屬性。 null
disabled boolean 如果設置為 true，則禁用按鈕。 false
toggle boolean 如果設置為 true，則允許用戶切換按鈕的選中狀態。該屬性自版本 1.3.3 起可用。 false
selected boolean 定義按鈕狀態是否已選擇。該屬性自版本 1.3.3 起可用。 false
group string 指示按鈕所屬的分組名稱。該屬性自版本 1.3.3 起可用。 null
plain boolean 如果設置為 true，則顯示一個簡單的效果。 false
text string 按鈕文本。 ''
iconCls string 在左邊顯示一個 16x16 圖標的 CSS class。 null
iconAlign string 按鈕圖標的位置。可能的值：'left'、'right'。該屬性自版本 1.3.2 起可用。 left

方法

名稱 參數 描述
options none 返回選項（options）屬性（property）。
disable none 禁用按鈕。
代碼實例：
  1. $('#btn').linkbutton('disable');
enable none 啟用按鈕。
代碼實例：
  1. $('#btn').linkbutton('enable');
select none 選中按鈕。該方法自版本 1.3.3 起可用。
unselect none 未選中按鈕。該方法自版本 1.3.3 起可用。

EasyUI Menubutton 菜單按鈕

擴展自 $.fn.linkbutton.defaults。通過 $.fn.menubutton.defaults 重寫默認的 defaults。

菜單按鈕（menubutton）是下拉菜單的一部分。它與鏈接按鈕（linkbutton）及菜單（menu）有關。顯示鏈接按鈕（linkbutton），隱藏菜單（menu）。當用戶點擊或移動鼠標到鏈接按鈕（linkbutton）上時，將顯示菜單（menu）以允許用戶點擊菜單。

依賴

  • menu
  • linkbutton

用法

通常，菜單按鈕（menubutton）以聲明的方式從標記創建。

<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
    data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
    <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>

使用 javascript 創建菜單按鈕（menubutton）。

<a href="javascript:void(0)" id="mb">Edit</a>
<div id="mm" style="width:150px">
...
</div>
$('#mb').menubutton({
    iconCls: 'icon-edit',
    menu: '#mm'
});

屬性

該屬性擴展自鏈接按鈕（linkbutton），下面是菜單按鈕（menubutton）增加的屬性。

名稱 類型 描述 默認值
plain boolean 如果設置為 true，則顯示一個簡單的效果。 true
menu string 用於創建對應菜單（menu）的選擇器。 null
duration number 當懸停在按鈕上時，以毫秒為單位定義的，顯示菜單（menu）的持續時間。 100

方法

該方法繼承自鏈接按鈕（linkbutton），下面是菜單按鈕（menubutton）增加的或重寫的方法。

名稱 參數 描述
options none 返回選項（options）對象。
disable none 禁用菜單按鈕（menubutton）。
enable none 啟用菜單按鈕（menubutton）。
destroy none 銷毀菜單按鈕（menubutton）。

EasyUI Splitbutton 分割按鈕

擴展自 $.fn.linkbutton.defaults。通過 $.fn.splitbutton.defaults 重寫默認的 defaults。

與菜單按鈕（menubutton）相似，分割按鈕（splitbutton）也與鏈接按鈕（linkbutton）及菜單（menu）有關。與菜單按鈕（menubutton）不同的是，分割按鈕（splitbutton）被分割為兩部分。當移動鼠標到分割按鈕（splitbutton）上時，將顯示一條分割線。只有當移動鼠標在分割按鈕的右側部分時才顯示菜單（menu）。

依賴

  • menubutton

用法

從標記創建分割按鈕（splitbutton）。

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
    data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
    <div data-options="iconCls:'icon-ok'">Ok</div>
    <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>

使用 javascript 創建分割按鈕（splitbutton）。

<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
...
</div>
$('#sb').splitbutton({
    iconCls: 'icon-ok',
    menu: '#mm'
});

屬性

該屬性擴展自鏈接按鈕（linkbutton），下面是分割按鈕（splitbutton）增加的屬性。

名稱 類型 描述 默認值
plain boolean 如果設置為 true，則顯示一個簡單的效果。 true
menu string 用於創建對應菜單（menu）的選擇器。 null
duration number 當懸停在按鈕上時，以毫秒為單位定義的，顯示菜單（menu）的持續時間。 100

方法

該方法繼承自鏈接按鈕（linkbutton），下面是分割按鈕（splitbutton）增加的或重寫的方法。

名稱 參數 描述
options none 返回選項（options）對象。
disable none 禁用分割按鈕（splitbutton）。代碼實例：
  1. $('#sb').splitbutton('disable');
enable none 啟用分割按鈕（splitbutton）。代碼實例：
  1. $('#sb').splitbutton('enable');
destroy none 銷毀分割按鈕（splitbutton）。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 5、easyUI-菜單與按鈕 Easyui系列之Menu（菜單）與 Button（按鈕）（5） EasyUI系列學習(七)-Linkbutton(按鈕) menu菜單項和menubutton菜單按鈕的結合使用 Python Tkinter Menubutton菜單按鈕 easyui datagrid使用按鈕 easyui datagrid新增按鈕 jquery easyui linkbutton()--按鈕操作(-----解決點擊事件禁用問題-----) 第一百九十七節，jQuery EasyUI，LinkButton(按鈕)組件 Jquery EasyUI中treegrid的中右鍵菜單和一般按鈕同時綁定事件時的怪異事件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM