首页 > Web开发 > 详细

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

时间:2015-10-30 12:47:45      阅读:246      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://my.oschina.net/u/2317468/blog/523899

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!