EasyUI 菜单与按钮
2016-07-27 20:31
686 查看
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>
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>
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 拖放
- Android UI组件--ListView(1)
- Mac OS X平台下QuickLook开发教程
- Request.QueryString
- IOS中 UIFont 字体大全
- POJ-3080 Blue Jeans(纯暴力)
- 【Mysql】存储emoji表情报错(Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...')的解决方案
- Unique Paths II
- Unique Paths
- 河南多校暑期训练-恢复赛 <字典树,最短路,queue,map,模拟,思维>
- 【priority_queue<int,vector<int>,greater<int>>优先队列 按照由小到大顺序】
- Question( category_id 关联 category_name)
- iOS -最全UIButton详解
- October query(数据库查询语句)
- Xilium.CefGlue怎么使用Js调用C#方法
- button上多一块蓝色
- UISearchBar的placeholder文字上移问题
- UIsearchBar的placeholder字体颜色和大小
- IPhone 自定义 UITableViewCell 行缩进
- reason: 'couldn't find a common superview for <UIView: 0x7ffc2e303270; frame = (0 0; 0 0); layer = <