easyUI splitbutton

@author YHC

继承至 $.fn.linkbutton.defaults,覆盖默认值$.fn.splitbutton.defaults

和menubutton和相似,splitbutton关联了linkbutton和menu,menubutton和splitbutton之间的不同就是splitbutton分为两个部分,当鼠标移动到splitbutton上

一个分割线将显示,这个菜单仅显示只是在你的鼠标移动到splitbutton右边的部分的时候.

easyUI splitbutton_第1张图片

相关依赖

  • menu
  • linkbutton

使用

从标记创建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新增属性.

Name Type Description Default
plain boolean True 显示简单的效果. true
menu string 一个选择器创建对应的menu . null
duration number 定义显示菜单持续时间毫秒数,当鼠标移动到button的时候. 100

方法

Name Parameter Description
options none 返回 options 对象.
disable none 禁用 splitbutton. 示例代码:
$('#sb').splitbutton('disable');
enable none 启用 splitbutton. 示例代码:
$('#sb').splitbutton('enable');
destroy none 销毁splitbutton.


以上如果有错误信息,请指出,thanks!



你可能感兴趣的:(easyUI splitbutton)