1、菜单
(1)、用法
通过标记创建菜单(menu)应该添加 'easyui-menu' class 到 <div> 标记。每个菜单项(menu item)通过 <div> 标记创建。我们可以添加 'iconCls' 属性到菜单项(menu item),以定义一个显示在菜单项(menu item)左边的图标。添加 'menu-sep' class 到菜单项(menu item)将产生一个菜单(menu)分隔符。
-
<div id="mm" class="easyui-menu" style="width:120px;">
-
<div>New</div>
-
<div>
-
<span>Open</span>
-
<div style="width:150px;">
-
<div><b>Word</b></div>
-
<div>Excel</div>
-
<div>PowerPoint</div>
-
</div>
-
</div>
-
<div data-options="iconCls:'icon-save'">Save</div>
-
<div class="menu-sep"></div>
-
<div>Exit</div>
-
</div>
编程创建菜单(menu)并侦听'onClick'事件。
-
$('#mm').menu({
-
onClick:function(item){
-
//...
-
}
-
});
显示菜单(Menu):当菜单(menu)被创建时,它是隐藏不可见的。调用 'show' 方法来显示菜单(menu)。
-
$('#mm').menu('show', {
-
left: 200,
-
top: 100
-
});
(2)、菜单项
菜单项(menu item)代表一个显示在菜单中的单独的项目。它包含下列属性:
名称
|
类型
|
描述
|
默认值
|
id
|
string
|
菜单项(menu item)的 id 属性。
|
|
text
|
string
|
项目文本。
|
|
iconCls
|
string
|
在项目左边显示一个 16x16 图标的 CSS class。
|
|
href
|
string
|
当点击菜单项(menu item)时设置页面位置。
|
|
disabled
|
boolean
|
定义是否禁用菜单项(menu item)。
|
false
|
onclick
|
function
|
当点击菜单项(menu item)时被调用的函数。
|
|
(3)、菜单属性
名称
|
类型
|
描述
|
默认值
|
zIndex
|
number
|
菜单(Menu)的 z-index 样式,从它开始增加。
|
110000
|
left
|
number
|
菜单(Menu)的左边位置。
|
0
|
top
|
number
|
菜单(Menu)的顶部位置。
|
0
|
minWidth
|
number
|
菜单(Menu)的最小宽度。该属性自版本 1.3.2 起可用。
|
120
|
hideOnUnhover
|
boolean
|
如果设置为 true,当鼠标离开它时自动隐藏菜单(menu)。该属性自版本 1.3.5
起可用。
|
true
|
(4)、菜单事件
名称
|
参数
|
描述
|
onShow
|
non e
|
当菜单(menu)显示之后触发。
|
onHide
|
none
|
当菜单(menu)隐藏之后触发。
|
onClick
|
item
|
当点击菜单项(menu item)时触发。下面的实例演示如何处理所有菜单项点击:
-
<div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
-
<div data-options="name:'new'">New</div>
-
<div data-options="name:'save',iconCls:'icon-save'">Save</div>
-
<div data-options="name:'print',iconCls:'icon-print'">Print</div>
-
<div class="menu-sep"></div>
-
<div data-options="name:'exit'">Exit</div></div><script type="text/javascript">
-
function menuHandler(item){
-
alert(item.name)
-
}</script>
|
(5)、菜单方法
名称
|
参数
|
描述
|
options
|
none
|
返回选项(options)对象。
|
show
|
pos
|
在指定的位置显示菜单(menu)。
pos 参数有两个属性:
left:新的左边位置。
top:新的顶部位置。
|
hide
|
none
|
隐藏菜单(menu)。
|
destroy
|
none
|
销毁菜单(menu)。
|
getItem
|
itemEl
|
获取包含 'target' 属性(指示项目 DOM 元素)的菜单项(menu item)
属性。
下面的实例
演示如何通过 id 获取指定的项目:
-
<div id="mm" class="easyui-menu" style="width:120px">
-
<div>New</div>
-
<div id="m-open">Open</div>
-
<div>Save</div></div>
-
var itemEl = $('#m-open')[0]; // the menu item element
-
var item = $('#mm').menu('getItem', itemEl);
-
console.log(item);
|
setText
|
param
|
给指定的菜单项(menu item)设置文本。'param' 参数包含两个属性:
target:DOM 对象,被设定的菜单项(menu item)。
text:string,新的文本值。
代码实例:
-
var item = $('#mm').menu('findItem', 'Save');
-
$('#mm').menu('setText', {
-
target: item.target,
-
text: 'Saving'});
|
setIcon
|
param
|
给指定的菜单项(menu item)设置图标。'param' 参数包含两个属性:
target:DOM 对象,即菜单项(menu item)。
iconCls:新图标的 CSS class。
代码实例:
-
$('#mm').menu('setIcon', {
-
target: $('#m-open')[0],
-
iconCls: 'icon-closed'});
|
findItem
|
text
|
找到指定的菜单项(menu item),返回对象与 getItem 方法相同。
代码实例:
-
// find 'Open' item and disable itvar item = $('#mm')
-
.menu('findItem','Open');
-
$('#mm').menu('disableItem', item.target);
|
appendItem
|
options
|
追加一个新的菜单项(menu item),'param' 参数指示新的项目属性。
默认情况下,新增的项目将作为*菜单项(menu item)。如需追加
一个子菜单项,需设置 'parent' 属性,用来指示已经有子项目的父
项目元素。
代码实例:
-
// append a top menu item
-
$('#mm').menu('appendItem', {
-
text: 'New Item',
-
iconCls: 'icon-ok',
-
onclick: function(){alert('New Item')}});
-
$('#mm').menu('appendItem', {
-
separator: true});// append a sub menu itemvar item = $('#mm')
-
.menu('findItem', 'Open'); // find 'Open' item
-
$('#mm').menu('appendItem', {
-
parent: item.target, // the parent item element
-
text: 'Open Excel',
-
iconCls: 'icon-excel',
-
onclick: function(){alert('Open Excel')}});
|
removeItem
|
itemEl
|
移除指定的菜单项(menu item)。
|
enableItem
|
itemEl
|
启用菜单项(menu item)。
|
disableItem
|
itemEl
|
禁用菜单项(menu item)。
|
(6)、示例
-
<!doctype html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>jQuery EasyUI Demo</title>
-
<link rel="stylesheet" type="text/css" href="css/easyui.css">
-
<link rel="stylesheet" type="text/css" href="css/icon.css">
-
<script type="text/javascript" src="js/jquery.min.js"></script>
-
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
-
<script type="text/javascript">
-
$(function(){
-
$(document).bind('contextmenu',function(e){
-
$('#mm').menu('show', {
-
left: e.pageX,
-
top: e.pageY
-
});
-
return false;
-
});
-
});
-
function showmenu(){
-
$('#mm').menu('show', {
-
left: 50,
-
top: 100
-
});
-
}
-
</script>
-
</head>
-
<body>
-
<div>
-
<button onclick="showmenu()">点击显示菜单</button><br />
-
<p><b>或者在页面上点击鼠标右键也会显示菜单</b></p>
-
</div>
-
<div id="mm" class="easyui-menu" style="width:120px;">
-
<div onclick="javascript:alert('new')">新建</div>
-
<div>
-
<span>打开</span>
-
<div style="width:150px;">
-
<div><b>Word</b></div>
-
<div>Excel</div>
-
<div>PowerPoint</div>
-
</div>
-
</div>
-
<div iconCls="icon-save">保存</div>
-
<div class="menu-sep"></div>
-
<div>退出</div>
-
</div>
-
</body>
-
</html>
2、链接按钮(Link Button)
通常情况下,使用 <button> 元素来创建按钮,而链接按钮(Link Button)则是使用 <a> 元素来创建的。所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的 <a> 元素。为了创建链接按钮(Link Button),所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到 <a> 元素。
(1)、用法
从标记创建链接按钮(linkbutton)更容易。
-
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
编程创建链接按钮(linkbutton)也是允许的。
-
<a id="btn" href="#">easyui</a>
-
$('#btn').linkbutton({
-
iconCls: 'icon-search'
-
});
处理链接按钮(linkbutton)上的点击。链接按钮(linkbutton)上的点击将把用户引导到其他页面。
-
<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
下面的实例将警告一个消息。
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
-
onclick="javascript:alert('easyui')">easyui</a>
使用 jQuery 绑定 click 处理程序。
-
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
-
$(function(){
-
$('#btn').bind('click', function(){
-
alert('easyui');
-
});
-
});
(2)、属性
名称
|
类型
|
描述
|
默认值
|
id
|
string
|
该组件的 id 属性。
|
null
|
disabled
|
boolean
|
如果设置为 true,则禁用按钮。
|
false
|
toggle
|
boolean
|
如果设置为 true,则允许用户切换按钮的选中状态。该属性自版本 1.3.3 起可用。
|
false
|
selected
|
boolean
|
定义按钮状态是否已选择。该属性自版本 1.3.3 起可用。
|
false
|
group
|
string
|
指示按钮所属的分组名称。该属性自版本 1.3.3 起可用。
|
null
|
plain
|
boolean
|
如果设置为 true,则显示一个简单的效果。
|
false
|
text
|
string
|
按钮文本。
|
''
|
iconCls
|
string
|
在左边显示一个 16x16 图标的 CSS class。
|
null
|
iconAlign
|
string
|
按钮图标的位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。
|
left
|
(3)、方法
名称
|
参数
|
描述
|
options
|
none
|
返回选项(options)属性(property)。
|
disable
|
none
|
禁用按钮。
代码实例:
$('#btn').linkbutton('disable');
|
enable
|
none
|
启用按钮。
代码实例:
$('#btn').linkbutton('enable');
|
select
|
none
|
选中按钮。该方法自版本 1.3.3 起可用。
|
unselect
|
none
|
未选中按钮。该方法自版本 1.3.3 起可用。
|
(4)、示例
-
<!doctype html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>jQuery EasyUI Demo</title>
-
<link rel="stylesheet" type="text/css" href="css/easyui.css">
-
<link rel="stylesheet" type="text/css" href="css/icon.css">
-
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
-
<link rel="stylesheet" type="text/css" href="css/color.css"/>
-
<script type="text/javascript" src="js/jquery.min.js"></script>
-
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
-
</head>
-
<body>
-
<h2>Basic LinkButton</h2>
-
<p>Buttons can be created from <a> or <button> elements.</p>
-
<p>Basic Buttons</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
-
<a href="#" class="easyui-linkbutton">Text Button</a>
-
</div>
-
<p>Fixed Width Buttons</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:80px">Print</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:80px">Reload</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:80px">Help</a>
-
</div>
-
<h2>Fluid LinkButton</h2>
-
<p>This example shows how to set the width of LinkButton to a percentage of its parent container.</p>
-
<p>width: 15%</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:15%">Add</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:15%">Remove</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%">Save</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" style="width:15%">Cut</a>
-
<a href="#" class="easyui-linkbutton" style="width:15%">Text Button</a>
-
</div>
-
<p>width: 20%</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:20%">Search</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'" style="width:20%">Print</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" style="width:20%">Reload</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'" style="width:20%">Help</a>
-
</div>
-
<h2>Button Group</h2>
-
<p>In a button group only one button can be selected.</p>
-
<div class="easyui-panel" style="padding:5px;">
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true">Button 2</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 3</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 4</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 5</a>
-
</div>
-
<div style="margin:20px 0;"></div>
-
<div class="easyui-panel" style="padding:5px;">
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 1</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true,selected:true">Button 2</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 3</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 4</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2',plain:true">Button 5</a>
-
</div>
-
<h2>Icon Align on LinkButton</h2>
-
<p>Change the icon align to place icon on left, right, top or bottom of button.</p>
-
<div style="margin:10px 0 20px 0">
-
<span>Select Icon Align: </span>
-
<select onchange="$('#button-bar a').linkbutton({iconAlign:this.value})">
-
<option value="left">Left</option>
-
<option value="right">Right</option>
-
<option value="top">Top</option>
-
<option value="bottom">Bottom</option>
-
</select>
-
</div>
-
<div id="button-bar">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
-
</div>
-
<h2>Plain LinkButton</h2>
-
<p>The buttons with plain style have transparent background.</p>
-
<div class="easyui-panel" style="padding:5px;">
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-help'"> </a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'"></a>
-
<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'"></a>
-
</div>
-
<h2>LinkButton Size</h2>
-
<p>This sample shows how to display small buttons and large buttons.</p>
-
<p>Small Buttons</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
-
<a href="#" class="easyui-linkbutton">Text Button</a>
-
</div>
-
<p>Large Buttons</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">Clip Art</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
-
</div>
-
<h2>Style LinkButton</h2>
-
<p>This example shows how to style a linkbutton.</p>
-
<div style="margin:20px 0">
-
<a href="#" class="easyui-linkbutton c1" style="width:120px">Button1</a>
-
<a href="#" class="easyui-linkbutton c2" style="width:120px">Button2</a>
-
<a href="#" class="easyui-linkbutton c3" style="width:120px">Button3</a>
-
<a href="#" class="easyui-linkbutton c4" style="width:120px">Button4</a>
-
</div>
-
<div style="margin:20px 0">
-
<a href="#" class="easyui-linkbutton c5" style="width:120px">Button5</a>
-
<a href="#" class="easyui-linkbutton c6" style="width:120px">Button6</a>
-
<a href="#" class="easyui-linkbutton c7" style="width:120px">Button7</a>
-
<a href="#" class="easyui-linkbutton c8" style="width:120px">Button8</a>
-
</div>
-
<h2>Toggle Button</h2>
-
<p>Click the button below to switch its selected state.</p>
-
<div style="padding:5px 0;">
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true">Add</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',toggle:true">Remove</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',toggle:true,selected:true">Save</a>
-
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',toggle:true">Cut</a>
-
<a href="#" class="easyui-linkbutton" data-options="toggle:true">Text Button</a>
-
</div>
-
</body>
-
</html>
![EasyUI 菜单与按钮 EasyUI 菜单与按钮](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzU1NS82YTgyNzc1NjIxOWU0MjllZGQyNmI0Y2ZlNmE1NGZkYi5wbmc=)
3、菜单按钮(Menu Button)
菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单。为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu).
(1)、用法
通常,菜单按钮(menubutton)以声明的方式从标记创建。
-
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
-
data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
-
<div id="mm" style="width:150px;">
-
<div data-options="iconCls:'icon-undo'">Undo</div>
-
<div data-options="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 data-options="iconCls:'icon-remove'">Delete</div>
-
<div>Select All</div>
-
</div>
使用 JavaScript 创建菜单按钮(menubutton)。
-
<a href="javascript:void(0)" id="mb">Edit</a>
-
<div id="mm" style="width:150px">
-
...
-
</div>
-
$('#mb').menubutton({
-
iconCls: 'icon-edit',
-
menu: '#mm'
-
});
(2)、属性
该属性扩展自链接按钮(linkbutton),下面是菜单按钮(menubutton)增加的属性。
名称
|
类型
|
描述
|
默认值
|
plain
|
boolean
|
如果设置为 true,则显示一个简单的效果。
|
true
|
menu
|
string
|
用于创建对应菜单(menu)的选择器。
|
null
|
duration
|
number
|
当悬停在按钮上时,以毫秒为单位定义的,显示菜单(menu)的持续时间。
|
100
|
(3)、方法
该方法继承自链接按钮(linkbutton),下面是菜单按钮(menubutton)增加的或重写的方法。
名称
|
参数
|
描述
|
options
|
none
|
返回选项(options)对象。
|
disable
|
none
|
禁用菜单按钮(menubutton)。
|
enable
|
none
|
启用菜单按钮(menubutton)。
|
destroy
|
none
|
销毁菜单按钮(menubutton)。
|
(4)、示例
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Menu Alignment on MenuButton - jQuery EasyUI Demo</title>
-
<link rel="stylesheet" type="text/css" href="css/easyui.css">
-
<link rel="stylesheet" type="text/css" href="css/icon.css">
-
<link rel="stylesheet" type="text/css" href="css/demo.css">
-
<script type="text/javascript" src="js/jquery.min.js"></script>
-
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
-
</head>
-
<body>
-
<h2>Menu Alignment on MenuButton</h2>
-
<p>This example shows how to change the alignment of the top level menu.</p>
-
<div style="margin:20px 0;">
-
<span>Change Alignment: </span>
-
<select onchange="setalign(this.value)">
-
<option value="left">Left</option>
-
<option value="right">Right</option>
-
</select>
-
</div>
-
<div class="easyui-panel" style="padding:5px;">
-
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
-
<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
-
<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
-
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
-
</div>
-
<div id="mm1" style="width:150px;">
-
<div data-options="iconCls:'icon-undo'">Undo</div>
-
<div data-options="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>Toolbar</span>
-
<div>
-
<div>Address</div>
-
<div>Link</div>
-
<div>Navigation Toolbar</div>
-
<div>Bookmark Toolbar</div>
-
<div class="menu-sep"></div>
-
<div>New Toolbar...</div>
-
</div>
-
</div>
-
<div data-options="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>
-
<div id="mm3">
-
<div>History</div>
-
<div>Faq</div>
-
<div>Our Team</div>
-
</div>
-
<script>
-
function setalign(align){
-
$('a.easyui-menubutton').menubutton({
-
menuAlign: align
-
})
-
}
-
</script>
-
</body>
-
</html>
![EasyUI 菜单与按钮 EasyUI 菜单与按钮](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI5NS84NmI3N2Q4N2JhZWY0OTRmZjM1MjI4MWFhYTQyMDQ4Ny5wbmc=)
4、分割按钮(Split Button)
与菜单按钮(menubutton)相似,分割按钮(splitbutton)也与链接按钮(linkbutton)及菜单(menu)有关。与菜单按钮(menubutton)不同的是,分割按钮(splitbutton)被分割为两部分。当移动鼠标到分割按钮(splitbutton)上时,将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单(menu)。
(1)、用法
从标记创建分割按钮(splitbutton)。
-
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
-
data-options="menu:'#mm',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a>
-
<div id="mm" style="width:100px;">
-
<div data-options="iconCls:'icon-ok'">Ok</div>
-
<div data-options="iconCls:'icon-cancel'">Cancel</div>
-
</div>
使用 javascript 创建分割按钮(splitbutton)。
-
<a href="javascript:void(0)" id="sb" onclick="javascript:alert('ok')">Ok</a>
-
<div id="mm" style="width:100px;">
-
...
-
</div>
-
$('#sb').splitbutton({
-
iconCls: 'icon-ok',
-
menu: '#mm'
-
});
(2)、属性
该属性扩展自链接按钮(linkbutton),下面是分割按钮(splitbutton)增加的属性。
名称
|
类型
|
描述
|
默认值
|
plain
|
boolean
|
如果设置为 true,则显示一个简单的效果。
|
true
|
menu
|
string
|
用于创建对应菜单(menu)的选择器。
|
null
|
duration
|
number
|
当悬停在按钮上时,以毫秒为单位定义的,显示菜单(menu)的持续时间。
|
100
|
(3)、方法
该方法继承自链接按钮(linkbutton),下面是分割按钮(splitbutton)增加的或重写的方法。
名称
|
参数
|
描述
|
options
|
none
|
返回选项(options)对象。
|
disable
|
none
|
禁用分割按钮(splitbutton)。代码实例:
$('#sb').splitbutton('disable');
|
enable
|
none
|
启用分割按钮(splitbutton)。代码实例:
$('#sb').splitbutton('enable');
|
destroy
|
none
|
销毁分割按钮(splitbutton)。
|
(4)、示例
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>Basic SplitButton - jQuery EasyUI Demo</title>
-
<link rel="stylesheet" type="text/css" href="css/easyui.css">
-
<link rel="stylesheet" type="text/css" href="css/icon.css">
-
<link rel="stylesheet" type="text/css" href="css/demo.css">
-
<script type="text/javascript" src="js/jquery.min.js"></script>
-
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
-
</head>
-
<body>
-
<div style="margin:20px 0;">
-
<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('disable')">禁止编辑</a>
-
<a href="#" class="easyui-linkbutton" onclick="$('#btn-edit').splitbutton('enable')">可以编辑</a>
-
</div>
-
<div class="easyui-panel" style="padding:5px;">
-
<a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
-
<a id="btn-edit" href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
-
<a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
-
<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
-
</div>
-
<div id="mm1" style="width:150px;">
-
<div data-options="iconCls:'icon-undo'">Undo</div>
-
<div data-options="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>Toolbar</span>
-
<div>
-
<div>Address</div>
-
<div>Link</div>
-
<div>Navigation Toolbar</div>
-
<div>Bookmark Toolbar</div>
-
<div class="menu-sep"></div>
-
<div>New Toolbar...</div>
-
</div>
-
</div>
-
<div data-options="iconCls:'icon-remove'">Delete</div>
-
<div>Select All</div>
-
</div>
-
<div id="mm2" style="width:100px;">
-
<div data-options="iconCls:'icon-ok'">Ok</div>
-
<div data-options="iconCls:'icon-cancel'">Cancel</div>
-
</div>
-
<div id="mm3" style="width:150px;">
-
<div>Help</div>
-
<div>Update</div>
-
<div>
-
<span>About</span>
-
<div class="menu-content" style="padding:10px;text-align:left">
-
<img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
-
<p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
![EasyUI 菜单与按钮 EasyUI 菜单与按钮](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzk4Mi9lOWZlNDdjMWIyMzM4NzkxZWYyOWQ1OGZlMDAyMzBkZS5wbmc=)