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

2018-09-11 04:58 更新

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


jQuery EasyUI 插件 jQuery EasyUI 插件

擴(kuò)展自 $.fn.linkbutton.defaults。通過(guò) $.fn.splitbutton.defaults 重寫(xiě)默認(rèn)的 defaults。

與菜單按鈕(menubutton)相似,分割按鈕(splitbutton)也與鏈接按鈕(linkbutton)及菜單(menu)有關(guān)。與菜單按鈕(menubutton)不同的是,分割按鈕(splitbutton)被分割為兩部分。當(dāng)移動(dòng)鼠標(biāo)到分割按鈕(splitbutton)上時(shí),將顯示一條分割線。只有當(dāng)移動(dòng)鼠標(biāo)在分割按鈕的右側(cè)部分時(shí)才顯示菜單(menu)。

依賴(lài)

  • menubutton

用法

從標(biāo)記創(chuàng)建分割按鈕(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 創(chuàng)建分割按鈕(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'
});

屬性

該屬性擴(kuò)展自鏈接按鈕(linkbutton),下面是分割按鈕(splitbutton)增加的屬性。

名稱(chēng) 類(lèi)型 描述 默認(rèn)值
plain boolean 如果設(shè)置為 true,則顯示一個(gè)簡(jiǎn)單的效果。 true
menu string 用于創(chuàng)建對(duì)應(yīng)菜單(menu)的選擇器。 null
duration number 當(dāng)懸停在按鈕上時(shí),以毫秒為單位定義的,顯示菜單(menu)的持續(xù)時(shí)間。 100

方法

該方法繼承自鏈接按鈕(linkbutton),下面是分割按鈕(splitbutton)增加的或重寫(xiě)的方法。

名稱(chēng) 參數(shù) 描述
options none 返回選項(xiàng)(options)對(duì)象。
disable none 禁用分割按鈕(splitbutton)。代碼實(shí)例:
$('#sb').splitbutton('disable');
enable none 啟用分割按鈕(splitbutton)。代碼實(shí)例:
$('#sb').splitbutton('enable');
destroy none 銷(xiāo)毀分割按鈕(splitbutton)。

jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)