jQuery EasyUI使用教程之建立一个拆分按钮

<jQuery EasyUI最新版下载>

本教程主要为你们展现如何使用jQuery EasyUI建立一个拆分按钮。拆分包含了一个连接按钮和菜单，当用户点击或将鼠标悬停在下拉箭头区域时，对应的菜单就会显示。下面的示例演示了如何建立和使用拆分按钮：

查看演示

咱们建立一个拆分按钮和一个连接按钮：

< 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 >

建立完成拆分按钮时，咱们不须要写任何JavaScript代码。

有兴趣的朋友能够点击查看更多有关jQuery EasyUI的文章！