本教程主要为大家展示如何使用jQuery EasyUI创建一个菜单按钮。菜单按钮包含了一个按钮和菜单组件,当点击或将鼠标移动到该按钮上时,相应的菜单就会显示。
想要定义一个菜单按钮,首先你应该先定义一个链接按钮和一个菜单,下面是一个示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
div
style
=
"background:#fafafa;padding:5px;width:200px;border:1px solid #ccc"
>
<
a
href
=
"#"
class
=
"easyui-menubutton"
menu
=
"#mm1"
iconcls
=
"icon-edit"
>Edit</
a
>
<
a
href
=
"#"
class
=
"easyui-menubutton"
menu
=
"#mm2"
iconcls
=
"icon-help"
>Help</
a
>
</
div
>
<
div
id
=
"mm1"
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
iconcls
=
"icon-remove"
>Delete</
div
>
<
div
>Select All</
div
>
</
div
>
<
div
id
=
"mm2"
style
=
"width:100px;"
>
<
div
>Help</
div
>
<
div
>Update</
div
>
<
div
>About</
div
>
</
div
>
|
现在,菜单按钮就已经完成了,你不需要写任何的JavaScript代码了。
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程!