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)时触发。下面的实例演示如何处理所有菜单项点击: |
(5)、菜单方法
名称 | 参数 | 描述 |
options | none | 返回选项(options)对象。 |
show | pos | 在指定的位置显示菜单(menu)。 |
hide | none | 隐藏菜单(menu)。 |
destroy | none | 销毁菜单(menu)。 |
getItem | itemEl | 获取包含 'target' 属性(指示项目 DOM 元素)的菜单项(menu item) 属性。 下面的实例 演示如何通过 id 获取指定的项目: |
setText | param | 给指定的菜单项(menu item)设置文本。'param' 参数包含两个属性: |
setIcon | param | 给指定的菜单项(menu item)设置图标。'param' 参数包含两个属性: |
findItem | text | 找到指定的菜单项(menu item),返回对象与 getItem 方法相同。 |
appendItem | options | 追加一个新的菜单项(menu item),'param' 参数指示新的项目属性。 默认情况下,新增的项目将作为顶级菜单项(menu item)。如需追加 一个子菜单项,需设置 'parent' 属性,用来指示已经有子项目的父 项目元素。 代码实例:
|
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 οnclick="showmenu()">点击显示菜单
</button>
<br />
-
<p>
<b>或者在页面上点击鼠标右键也会显示菜单
</b>
</p>
-
</div>
-
<div id="mm" class="easyui-menu" style="width:120px;">
-
<div οnclick="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'"
-
ο
nclick=
"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 οnchange="$('#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>
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 οnchange="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>
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'" ο
nclick=
"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" οnclick="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" οnclick="$('#btn-edit').splitbutton('disable')">禁止编辑
</a>
-
<a href="#" class="easyui-linkbutton" οnclick="$('#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>