在分组按钮的样式和标签基础上我们可以很容易的创建分离式下拉按钮。分离式下拉按钮左边部分有标准的按钮功能,右边部分有一个下拉菜单。
可以设置额外的按钮样式.ks-button-mini
, .ks-button-small
, 或者 。ks-button-large
来定义按钮的大小
我们利用第二个按钮动作扩展了下拉按钮,点击右边图标时触发。
<div class="ks-split-button"> <div class="ks-button ks-button-mini">Mini action</div> <div class="ks-menu-button ks-button-mini"> <div class="ks-menu-button-caption"></div> <div class="ks-popupmenu"> <div class="ks-menuitem">Action</div> <div class="ks-menuitem">Another action</div> <div class="ks-menuitem">Something else here</div> </div> </div> </div>
可以通过 menu 配置控制下拉菜单的位置
通过 menu 配置控制下拉菜单的位置
new SplitButton({ render:"#para2", button:{ xclass:'button', content:'action' }, alignWithEl:false, menuButton:{ xclass:'menu-button', matchElWidth:false, menu:{ children:[ { content:'some action' }, { content:'more action' } ] } } }).render();