- jQuery EasyUI從零開始學
- 施堯
- 3213字
- 2019-12-06 14:09:00
2.4 菜單和按鈕
2.4.1 菜單（Menu）
菜單由菜單域與菜單元素組成，一個菜單域內有多個菜單元素，每一個菜單元素都擁有相關的屬性，而菜單域也擁有屬性、事件以及方法，菜單的創建較為麻煩，但是使用卻很簡單，本節將先介紹菜單元素的用法再詳細介紹菜單域的用法。
菜單的默認配置定義在$.fn.menu.defaults中。
1. 創建菜單
第一步需要創建一個菜單區域，并根據頁面需要設置菜單區域的寬度，我們可以通過在class中增加easyui-menu屬性來創建菜單區域，代碼如下：
01 <div class="easyui-menu" style="width:150px;" id=’mm’> 02 菜單區域… 03 </div>
第二步需要設置菜單元素，可以通過在菜單域中添加<div>標簽來創建菜單元素，代碼如下：
01 <div class="easyui-menu" style="width:150px;"> 02 <div>菜單元素1</div> 03 <div>菜單元素2</div> 04 <div>菜單元素3</div> 05 </div>
第三步需要通過JavaScript初始化菜單域，代碼如下：
$('#mm').menu();
第四步是顯示菜單區域，菜單區域創建完成后默認是不顯示的，開發人員需要通過如下代碼顯示菜單：
01 $('#mm').menu('show', {
02 left: 200,
03 top: 100
04 });
2. 菜單元素
菜單元素的屬性見表2.23。
表2.23 菜單元素的屬性
我們可以給菜單元素添加一個圖標和單擊事件，代碼如下：
<div data-options="iconCls:'icon-save'" onclick="alert('1111');">保存</div>
菜單元素本身也可以作為一個菜單域，可以在菜單元素中添加新的菜單元素，此時就可以創建二級菜單，如下代碼所示。
01 <div id="mm" class="easyui-menu" > 02 <div>菜單元素一</div> 03 <div> 04 <span>二級菜單</span> 05 <div > 06 <div>二級菜單元素1</div> 07 <div>二級菜單元素2</div> 08 </div> 09 </div> 10 <div>菜單元素二</div> 11 <div>菜單元素三</div> 12 </div>
提示
由于每一個菜單元素都可以作為一個菜單域，因此我們可以根據需要創建任意多級菜單。
菜單元素也可以作為一個菜單分隔符，例如下面的代碼可以創建一個菜單分隔符：
<div class="menu-sep"></div>
3. 菜單域的屬性
菜單域常用屬性的說明見表2.24。
表2.24 菜單域常用屬性
inline屬性設置菜單是否為內聯菜單。所謂的內聯，就是指顯示位置是否以其父元素的起點為起點，例如：
01 <style>
02 #border{
03 border-style: solid;
04 border-width: 1px;
05 height: 100px;
06 width: 200px;
07 margin-left:500px;
08 margin-top:200px;
09 }
10 </style>
11 <div id="border">
12 <div id="mm" class="easyui-menu" >
13 <div>菜單元素一</div>>
14 <div>菜單元素二</div>
15 <div>菜單元素三</div>
16 </div>
17 </div>
18 <script>
19 $('#mm').menu({
20 inline:true
21 });
22 $('#mm').menu('show', {
23 left: 200,
24 top: 100
25 });
26 </script>
最終運行結果如圖2.16所示。
圖2.16 內聯菜單
4. 菜單域的事件
菜單域常用事件的說明見表2.25。
表2.25 菜單域常用事件
當菜單域內有菜單元素被單擊時會觸發onClick事件。onClick事件參數item為被單擊的菜單元素對象，可以通過item.name或者item.id來獲取被單擊元素的name和id屬性。例如，下面的代碼當菜單元素一被單擊時會顯示該菜單元素名稱，開發者可以使用該事件為菜單域內的各類菜單元素添加不同的處理邏輯：
01 <div id="mm" class="easyui-menu" >
02 <div name='菜單元素1'>菜單元素一</div>
03 <div>菜單元素二</div>
04 <div>菜單元素三</div>
05 </div>
06 <script>
07 $('#mm').menu({
08 onClick:function(item){
09 alert(item.name);
10 }
11 });
12 $('#mm').menu('show', {
13 left: 200,
14 top: 100
15 });
16 </script>
5. 菜單域的方法
菜單域常用方法的說明見表2.26。
表2.26 菜單域常用方法
掌握菜單域的使用方法前，讀者首先應該了解itemEl參數的含義，它指的是一個菜單元素對象，我們可以通過如下方法獲取菜單元素對象：
01 <div id="mm" class="easyui-menu" >
02 <div id='m1'>菜單元素一</div>
03 <div>菜單元素二</div>
04 <div>菜單元素三</div>
05 </div>
06 <script>
07 var itemEl = $('#m1'); //獲取菜單元素一對象
08 </script>
findItem可以根據菜單元素名稱獲取菜單元素對象。
setText可以更改指定的菜單元素名稱。
setText的參數param包含兩個屬性，第一個為target屬性，它是指定的菜單元素的DOM對象；另一個為text屬性，它是更改后的菜單元素名稱，例如我們可以重新設置菜單元素的名稱，部分代碼如下：
01 var item = $('#mm').menu('findItem', '菜單元素一');
02 $('#mm').menu('setText', {
03 target: item.target,
04 text: '菜單元素新'
05 });
setIcon的參數param包含兩個屬性，第一個為target屬性，它是指定的菜單元素的DOM對象，另一個為iconCls屬性，它為指定圖標的類型。我們可以使用該方法設置菜單元素的圖標，部分代碼如下：
01 $('#mm').menu('setIcon', {
02 target: $('#mm').menu('findItem', '菜單元素一'),
03 iconCls: 'icon-closed'
04 });
2.4.2 鏈接按鈕（LinkButton）
鏈接按鈕由一個<a>標簽表示，它可以同時顯示文本和圖標，也可以只顯示其中的一個，鏈接按鈕的寬度會根據文本的長度自動適應。鏈接按鈕可以直接跳轉頁面，也可以通過程序獲取其單擊事件后進行相關邏輯處理。
鏈接按鈕的默認配置定義在$.fn.linkbutton.defaults中。
1. 創建鏈接按鈕
使用標記創建鏈接按鈕的方法如下：
<a id="btn" href="#" class="easyui-linkbutton">鏈接按鈕</a>
通過JavaScript創建鏈接按鈕的方法如下：
01 <a id="btn" href="#">鏈接按鈕</a>
02 $('#btn').linkbutton();
2. 鏈接按鈕屬性
鏈接按鈕常用屬性的說明見表2.27。
表2.27 鏈接按鈕常用屬性
鏈接按鈕屬性的詳細介紹如圖2.17所示。
圖2.17 鏈接按鈕屬性介紹
3. 鏈接按鈕事件
鏈接按鈕常用事件說明見表2.28。
表2.28 鏈接按鈕常用事件
4. 鏈接按鈕方法
鏈接按鈕常用方法說明見表2.29。
表2.29 鏈接按鈕常用方法
鏈接按鈕方法的使用非常簡單，如下代碼可以調整鏈接按鈕的尺寸：
01 $('#btn').linkbutton('resize', {
02 width: '100%',
03 height: 32
04 });
5. 處理鏈接按鈕上的單擊事件
鏈接按鈕的主要作用就是在其被單擊后可以處理一系列的事務，有些鏈接按鈕被單擊后需要直接跳轉到一個新的頁面，例如：
<a id="btn" href="test.html" class="easyui-linkbutton">鏈接按鈕</a>
大部分的鏈接按鈕在被單擊后需要處理一系列的邏輯，例如表單中的提交按鈕被單擊后，需要判斷用戶的輸入是否驗證通過，此時我們需要通過程序來獲取單擊事件，例如：
01 $('#btn').click(function(){
02 alert('easyui');
03 });
我們也可以使用鏈接按鈕提供的單擊事件方法，例如：
01 $('#btn').linkbutton({
02 iconCls: 'icon-search',
03 onClick:function(){
04 alert('easyui');
05 }
06 });
6. 鏈接按鈕組
我們通常會將一組關聯的鏈接按鈕分到一組中，當鏈接按鈕被分組后，用戶每次只能選中鏈接按鈕組中的一個按鈕，例如：
01 <div>
02 <a id="btn1" href="#">鏈接按鈕1</a>
03 <a id="btn3" href="#">鏈接按鈕2</a>
04 <a id="btn2" href="#">鏈接按鈕3</a>
05 </div>
06 <script>
07 $(function(){
08 $('#btn1').linkbutton({
09 toggle:true,
10 group:"btn-group"
11 });
12 $('#btn2').linkbutton({
13 toggle:true,
14 group:"btn-group"
15 });
16 $('#btn3').linkbutton({
17 toggle:true,
18 group:"btn-group"
19 });
20 });
21 </script>
最終運行結果如圖2.18所示。
圖2.18 鏈接按鈕組
2.4.3 菜單按鈕（MenuButton）
上一節我們講解了鏈接按鈕的使用方法。鏈接按鈕是一個基礎按鈕，它用于被單擊后處理一系列的事務，但是在實際開發中特別是在列表中往往需要用到大量的鏈接按鈕，例如某個頁面顯示10條用戶的基本信息，每個用戶的基本信息后面都需要有查看、編輯、刪除這三個鏈接按鈕，那么整個頁面至少需要用到30個鏈接按鈕。使用菜單按鈕可以減少頁面實際的按鈕數量，它僅顯示一個鏈接按鈕，當鏈接按鈕被單擊后會在其下方顯示一個菜單。
菜單按鈕的依賴關系如下：
- linkbutton
- menu
菜單按鈕擴展于：
- linkbutton
菜單按鈕的默認配置定義在$.fn.menubutton.defaults中。
1. 創建菜單按鈕
創建菜單按鈕時需要創建一個菜單按鈕和一個菜單，并且設置菜單按鈕的menu屬性為菜單的一個選擇器。
提示
所謂的選擇器就是如何選中某個元素，可以通過元素的id來選擇此時的寫法為#xx，也可以根據元素的class來選擇寫法為.xx。還有一些高級的選擇器就不在這里介紹了，詳細情況請查看jQuery選擇器。
通過標記創建菜單按鈕的方法如下：
01 <a href="JavaScript:void(0)" id="mb" class="easyui-menubutton" 02 data-options="menu:'#mm',iconCls:'icon-edit'">編輯</a> 03 <div id="mm" style="width:150px;"> 04 <div>詳情</div> 05 <div>修改</div> 06 <div>刪除</div> 07 </div>
通過JavaScript創建菜單按鈕的方法如下：
01 <a href="JavaScript:void(0)" id="mb" >編輯</a>
02 <div id="mm" style="width:150px;">
03 <div>詳情</div>
04 <div>修改</div>
05 <div>刪除</div>
06 </div>
07 <script>
08 $(function(){
09 $('#mb').menubutton({
10 iconCls: 'icon-edit',
11 menu:'#mm'
12 });
13 });
14 </script>
此時我們就創建了一個菜單按鈕，當將鼠標放到編輯按鈕上時，會在按鈕下方顯示一個菜單，運行效果如圖2.19所示。
圖2.19 菜單按鈕顯示效果
2. 菜單按鈕屬性
菜單按鈕常用的屬性見表2.30。
表2.30 菜單按鈕的常用屬性
3. 菜單按鈕事件
菜單按鈕本身無新增和重寫事件。
4. 菜單按鈕方法
菜單按鈕常用方法見表2.31。
表2.31 菜單按鈕的常用方法
2.4.4 分割按鈕（SplitButton）
分割按鈕與菜單按鈕一樣都是由鏈接按鈕和菜單組成的，不同的是當鼠標移動到菜單按鈕任意位置上時會顯示一個菜單，只有當鼠標移動到分割按鈕右側的圖標上時才會顯示菜單。也就是說，使用分割按鈕可以直接單擊處理事務而不需要顯示菜單。例如，我們上一節展示的一個菜單按鈕，它有詳情、修改、刪除這三個功能，通過編輯文本來提示用戶單擊并顯示菜單，但是對于用戶來說詳情功能用得最多，而修改、刪除功能極少使用，這時我們更希望菜單按鈕單擊后，可以直接跳轉到詳情頁面而不是顯示菜單，分割按鈕就是為了這一問題而設計的。
分割按鈕的依賴關系如下：
- menubutton
分割按鈕擴展于：
- menubutton
分割按鈕的默認配置定義在$.fn.splitbutton.defaults中。
1. 創建分割按鈕
通過標記創建分割按鈕的方法如下：
01 <a href="JavaScript:void(0)" id="mb" class="easyui-splitbutton" 02 data-options="menu:'#mm'">詳情</a> 03 <div id="mm" style="width:150px;"> 04 <div>詳情</div> 05 <div>修改</div> 06 <div>刪除</div> 07 </div>
通過JavaScript創建分割按鈕的方法如下：
01 <a href="JavaScript:void(0)" id="mb" >編輯</a>
02 <div id="mm" style="width:150px;">
03 <div>詳情</div>
04 <div>修改</div>
05 <div>刪除</div>
06 </div>
07 <script>
08 $(function(){
09 $('#mb').splitbutton({
10 menu:'#mm',,
11 onClick:function(){
12 //處理詳情功能業務
13 }
14 });
15 });
16 </script>
2. 分割按鈕屬性
分割按鈕常用屬性見表2.32。
表2.32 分割按鈕的常用屬性
3. 分割按鈕事件
分割按鈕本身無新增和重寫事件。
4. 分割按鈕方法
分割按鈕常用方法見表2.33。
表2.33 分割按鈕的常用方法
2.4.5 切換按鈕（SwitchButton）
切換按鈕通常用來提供兩種狀態的切換，例如開啟／關閉狀態，用戶可以通過單擊切換按鈕的滑塊來切換狀態。
切換按鈕的默認配置定義在$.fn.switchbutton.defaults中。
1. 創建切換按鈕
通過標記創建切換按鈕的方法如下：
<input class="easyui-switchbutton" >
通過JavaScript創建切換按鈕的方法如下：
01 <input id="sb" >
02 <script type="text/javascript">
03 $(function(){
04 $('#sb').switchbutton({
05 checked: true,
06 })
07 })
08 </script>
2. 切換按鈕屬性
切換按鈕常用屬性說明見表2.34。
表2.34 切換按鈕常用屬性說明
3. 切換按鈕事件
切換按鈕常用事件說明見表2.35。
表2.35 切換按鈕常用事件說明
4. 切換按鈕方法
切換按鈕常用方法說明見表2.36。
表2.36 切換按鈕常用方法說明
