jQuery EasyUI menus and buttons - Create split button
Split button (Split Button) contains a link button (Link Button) and a menu (Menu). When the user clicks the down arrow, or hover over the region will display a corresponding menu. This example demonstrates how to create and use a split button (Split Button).
We create a split button (Split Button) and a link button (Link Button):
<Div style = "border: 1px solid #ccc; background: #fafafa; padding: 5px; width: 120px;"> <a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit"> Edit </a> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"> </a> </ Div> <Div id = "mm" style = "width: 150px;"> <Div iconCls = "icon-undo"> Undo </ div> <Div 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> <Span> Open </ span> <Div style = "width: 150px;"> <Div> Firefox </ div> <Div> Internet Explorer </ div> <Div class = "menu-sep"> </ div> <Div> Select Program ... </ div> </ Div> </ Div> <Div iconCls = "icon-remove"> Delete </ div> <Div> Select All </ div> </ Div>
Has now defined a split button (Split Button), you do not need to write any javascript code.