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的文章！