本教程主要为大家展示如何使用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的文章!
原文:http://my.oschina.net/u/2317468/blog/523899