jQuery EasyUI 菜單與按鈕插件 - Splitbutton 分割按鈕

jQuery EasyUI 插件 jQuery EasyUI 插件

擴展自 $.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）。代碼實例： 
$('#sb').splitbutton('disable');
enable none 啟用分割按鈕（splitbutton）。代碼實例： 
$('#sb').splitbutton('enable');
destroy none 銷毀分割按鈕（splitbutton）。
jQuery EasyUI 插件 jQuery EasyUI 插件