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="width: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="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
});

菜單項

菜單項（menu item）代表一個顯示在菜單中的單獨的項目。它包含下列屬性：

菜單屬性

菜單事件

 

onClick當點擊菜單項（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>

菜單方法