Easyui系列之Menu（菜单）与 Button（按钮）（5）

1、EasyUI Linkbutton 链接按钮

用法

创建链接按钮（linkbutton）

从标记创建链接按钮（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、EasyUI Sidemenu 侧栏菜单

 

创建侧菜单

通过标签创建侧菜单

<div id="sm" data-toggle="topjui-sidemenu" data-options="data:data">
</div>

使用Javascript创建侧菜单。

<div id="sm" style="300px"></div>
$('#sm').iSidemenu({
data: data
});

Sidemenu 属性

Sidemenu方法

Sidemenu事件

3、EasyUI Menu 菜单

 菜单（Menu）通常用于上下文菜单。它是创建其他菜单组件（比如：menubutton、splitbutton）的基础组件。它也能用于导航和执行命令。

创建菜单（Menu）

通过标记创建菜单（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="120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="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
});

菜单项

菜单项（menu item）代表一个显示在菜单中的单独的项目。它包含下列属性：

菜单属性

菜单事件

 

onClick当点击菜单项（menu item）时触发。下面的实例演示如何处理所有菜单项点击：

<div class="easyui-menu" data-options="onClick:menuHandler" style="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>

菜单方法