天天看點
傳回

初試JqueryEasyUI（附Demo）

寫在前面

  1. 準備
  2. 布局Layout
  3. 菜單樹Tree
  4. 内容頁Tabs
  5. 右鍵菜單Menu
  6. 表單Form
  7. 對話框Dialog
  8. 示例Demo下載下傳

　　關于easyui不多說，對于我們這樣沒有美術功底的程式員來說，簡直是大大的福利，園裡面也有不少人在用，自己在整理一個個站，背景管理要用，正好可以學習下。網上找了相關的教程什麼的，但是發現還是官網上的demo講的狠詳細，還有就是下載下傳後的demo示例，但都是某個控件示例，很遺憾，沒有整個系統的demo。

　　下面我們就一步一步來建立，在做的過程也有許多的問題，對于菜鳥的我們來說，享受其中才是最重要的。

　　自己動手，豐衣足食。

一步一個腳印

1，準備

　　http://www.jeasyui.com/download/index.php下載下傳最新的easyui包，裡面有個demo檔案夾，開發的時候盡量别删了，我們在做的過程中可以參照裡面的demo示例，使用easyui需要引用下面四個css和js：

1     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
2     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
3     <script src="EasyUI/jquery.min.js"></script>
4     <script src="EasyUI/jquery.easyui.min.js"></script>

　　第一個easyui.css是基本的樣式，我們在themes檔案夾下會發現有幾種皮膚，可以切換樣式更換不同的控件風格。

　　第二個icon.css是圖示樣式，增加圖示按照已有規則建立，下面兩個js引用就不多說了。

2，布局Layout

　　背景管理系統一般都是分為四個部分，上部是logo或标題，左部是菜單，下部是版權資訊，右部是内容資訊。在easyui中我們可以使用Layout進行布局，在demo檔案夾-Layout檔案夾下的basic.html，基本上是我們需要的效果，複制一下，把高度和寬度修改一下（設定百分比）：

初試JqueryEasyUI（附Demo）

　　但是浏覽一下會發現頁面什麼也沒有，當時很莫名奇妙，試了好久才發現，class="easyui-layout"必須放在body标簽裡面，通過上面截圖可以看到north、south、west、east和center分别代表五個部分，我們不需要east導航可以直接删掉，簡單修改下就是我們想要的效果，示例代碼：

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head id="Head1" runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11     <link href="css/admin.css" rel="stylesheet" />
12     <script src="EasyUI/jquery.min.js"></script>
13     <script src="EasyUI/jquery.easyui.min.js"></script>
14 </head>
15 <body class="easyui-layout">
16     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
17         <img src="images/logo.png" />EasyUIDemo
18     </div>
19     <div data-options="region:'south',border:false" style="height: 23px;">
20         <div class="footer">EasyUIDemo</div>
21     </div>
22     <div data-options="region:'west',split:true" title="West" style="width: 170px;"></div>
23     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
24         <table class="easyui-datagrid"
25             data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
26             <thead>
27                 <tr>
28                     <th data-options="field:'itemid'" width="80">Item ID</th>
29                     <th data-options="field:'productid'" width="100">Product ID</th>
30                     <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
31                     <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
32                     <th data-options="field:'attr'" width="150">Attribute</th>
33                     <th data-options="field:'status',align:'center'" width="50">Status</th>
34                 </tr>
35             </thead>
36         </table>
37     </div>
38 </body>
39 </html>

View Code

　　效果：

初試JqueryEasyUI（附Demo）

3，菜單樹Tree

　　基本的布局建立好了之後，我們需要在左部添加菜單樹，我們選取的是demo檔案夾-tree檔案夾下的lines.html，複制一下添加在west左部div下，lines示例是從json檔案中讀取樹的，我們可以從basic.html中看到建立tree的格式，state:'closed'表示此接單關閉，預設是打開。

　　關于tree自定義節點圖示，icons.html是自定義節點圖示示例，但是從json讀取的，格式為："iconCls":"icon-remove"；運作可以看到源代碼：

初試JqueryEasyUI（附Demo）

　　當時設定以為在span标簽設定圖示樣式，但是并不起作用，花了很多時間嘗試，發現原來要在li标簽設定，通過這個示例需要提醒大家的是，在用easyui布局的時候，不要檢視樣式布局，因為運作後都是easyui生成的源代碼，并不是原始的，按照這個設定起來會有些問題。

　　簡單設定一下，就是我們要的效果，示例代碼：

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head id="Head1" runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11     <link href="css/admin.css" rel="stylesheet" />
12     <script src="EasyUI/jquery.min.js"></script>
13     <script src="EasyUI/jquery.easyui.min.js"></script>
14 </head>
15 <body class="easyui-layout">
16     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
17         <img src="images/logo.png" />EasyUIDemo
18     </div>
19     <div data-options="region:'south',border:false" style="height: 23px;">
20         <div class="footer">EasyUIDemo</div>
21     </div>
22     <div data-options="region:'west',split:true" title="West" style="width: 170px;">
23         <div class="easyui-accordion" data-options="fit:true,border:false">
24             <div title="系統設定1" data-options="selected:true">
25                 <div style="margin: 5px">
26                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">
27                         <li data-options="iconCls:'icon-group'">
28                             <span>基本設定</span>
29                             <ul>
30                                 <li data-options="iconCls:'icon-group_add'">
31                                     <span>test1</span>
32                                 </li>
33                                 <li data-options="iconCls:'icon-group_delete'">
34                                     <span>test2</span>
35                                 </li>
36                                 <li data-options="iconCls:'icon-group_edit'">
37                                     <span>test3</span>
38                                 </li>
39                             </ul>
40                         </li>
41                         <li data-options="state:'closed',iconCls:'icon-joystick'">
42                             <span>系統設定</span>
43                             <ul>
44                                 <li data-options="iconCls:'icon-joystick_add'">
45                                     <span>test4</span>
46                                 </li>
47                             </ul>
48                         </li>
49                     </ul>
50                 </div>
51             </div>
52             <div title="系統設定2" style="padding: 10px;">
53                 content2
54             </div>
55             <div title="系統設定3" style="padding: 10px">
56                 content3
57             </div>
58         </div>
59     </div>
60     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
61         <table class="easyui-datagrid"
62             data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
63             <thead>
64                 <tr>
65                     <th data-options="field:'itemid'" width="80">Item ID</th>
66                     <th data-options="field:'productid'" width="100">Product ID</th>
67                     <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
68                     <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
69                     <th data-options="field:'attr'" width="150">Attribute</th>
70                     <th data-options="field:'status',align:'center'" width="50">Status</th>
71                 </tr>
72             </thead>
73         </table>
74     </div>
75 </body>
76 </html>
初試JqueryEasyUI（附Demo）

4，内容頁Tabs

　　菜單tree建立好了，接下來就是center部分的内容頁，我們選取的是demo檔案夾-tabs檔案夾下的tabstools.html，此示例有tools友善我們擴充，在做添加tabs的時候花了很多時間，一個是tabs添加center裡面，另一個是tools樣式問題，關于第一個還好，經過多次嘗試，嵌套裡面去了，第二個問題我們先看下截圖：

初試JqueryEasyUI（附Demo）

　　不知怎的？在ie是可以，谷歌和火狐不行，去掉樣式height: 26px;就是好的，但高度就不對了，嘗試了好久，最後沒辦法，建立一個新的webform，一段一段代碼貼過去測試，最後發現是頭部标簽：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">問題，建立的webform：<!DOCTYPE html>就是好的，真沒想到是這樣的原因導緻。

　　下面示例代碼中的addPanel()和removePanel()是添加tab的js方法，當然也可以在頁面加載的時候動态的建立tab，需要注意的是在tabs_div中有data-options="tools:'#tab-tools'"屬性，tab-tools要和下面tools的id對應，表示tabs對應的tools，設定好了自動設定樣式，不需要你手動的設定。

　　示例代碼：

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EasyUIDemo.WebForm1" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11     <link href="css/admin.css" rel="stylesheet" />
12     <script src="EasyUI/jquery.min.js"></script>
13     <script src="EasyUI/jquery.easyui.min.js"></script>
14 </head>
15 <body class="easyui-layout">
16     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
17         <img src="images/logo.png" />EasyUIDemo
18     </div>
19     <div data-options="region:'west',split:true,title:'導航菜單'" style="width: 170px;">
20         <div class="easyui-accordion" data-options="fit:true,border:false">
21             <div title="系統設定1" data-options="selected:true">
22                 <div style="margin: 5px">
23                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">
24                         <li data-options="iconCls:'icon-group'">
25                             <span>基本設定</span>
26                             <ul>
27                                 <li data-options="iconCls:'icon-group_add'">
28                                     <span>test1</span>
29                                 </li>
30                                 <li data-options="iconCls:'icon-group_delete'">
31                                     <span>test2</span>
32                                 </li>
33                                 <li data-options="iconCls:'icon-group_edit'">
34                                     <span>test3</span>
35                                 </li>
36                             </ul>
37                         </li>
38                         <li data-options="state:'closed',iconCls:'icon-joystick'">
39                             <span>系統設定</span>
40                             <ul>
41                                 <li data-options="iconCls:'icon-joystick_add'">
42                                     <span>test4</span>
43                                 </li>
44                             </ul>
45                         </li>
46                     </ul>
47                 </div>
48             </div>
49             <div title="系統設定2" style="padding: 10px;">
50                 content2
51             </div>
52             <div title="系統設定3" style="padding: 10px">
53                 content3
54             </div>
55         </div>
56     </div>
57     <div data-options="region:'south',border:false" style="height: 23px;">
58         <div class="footer">EasyUIDemo</div>
59     </div>
60     <div data-options="region:'center'">
61         <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'">
62             <div title="首頁" data-options="iconCls:'icon-house'" style="padding: 10px; height: 100%;">首頁</div>
63         </div>
64         <div id="tab-tools">
65             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
66             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
67         </div>
68     </div>
69     <script type="text/javascript">
70         var index = 0;
71         function addPanel() {
72             index++;
73             $('#tabs').tabs('add', {
74                 title: 'Tab' + index,
75                 content: '<div style="padding:10px">Content' + index + '</div>',
76                 closable: true
77             });
78         }
79         function removePanel() {
80             var tab = $('#tabs').tabs('getSelected');
81             if (tab) {
82                 var index = $('#tabs').tabs('getTabIndex', tab);
83                 $('#tabs').tabs('close', index);
84             }
85         }
86     </script>
87 </body>
88 </html>
初試JqueryEasyUI（附Demo）

5，右鍵菜單Menu

　　tab建立好之後，我們需要在tab添加右鍵menu，以便我們的tab操作，demo檔案夾-menu檔案夾下的basic.html，我們把代碼複制過來，可以看到先建立一個div訓示右鍵menu，js綁定右擊代碼：

1         $(function(){
2             $(document).bind('contextmenu',function(e){
3                 e.preventDefault();
4                 $('#mm').menu('show', {
5                     left: e.pageX,
6                     top: e.pageY
7                 });
8             });
9         });

　　上面代碼是綁定區域是整個頁面，我們需要修改一下：把$(document) 改成$(".tabs-inner")，.tabs-inner是每個tab的css，檢視頁面源代碼我們就可以看到。

　　綁定右擊事件後，下面就是關閉tab了，easyui提供了關閉tab的接口：$('#tabs').tabs('close', tab标題);根據此接口我們可以擴充其他的菜單，比如關閉全部，除此之外全部關閉等等，就像vs的tab管理一樣。

　　tab管理代碼：

1 //關閉tab
 2 function closeTab(action) {
 3     var alltabs = $('#tabs').tabs('tabs');
 4     var currentTab = $('#tabs').tabs('getSelected');
 5     var allTabtitle = [];
 6     $.each(alltabs, function (i, n) {
 7         allTabtitle.push($(n).panel('options').title);
 8     })
 9     switch (action) {
10         case "refresh":
11             var iframe = $(currentTab.panel('options').content);
12             var src = iframe.attr('src');
13             $('#tabs').tabs('update', {
14                 tab: currentTab,
15                 options: {
16                     content: createFrame(src)
17                 }
18             })
19             break;
20         case "close":
21             var currtab_title = currentTab.panel('options').title;
22             $('#tabs').tabs('close', currtab_title);
23             break;
24         case "closeall":
25             $.each(allTabtitle, function (i, n) {
26                 if (n != onlyOpenTitle) {
27                     $('#tabs').tabs('close', n);
28                 }
29             });
30             break;
31         case "closeother":
32             var currtab_title = currentTab.panel('options').title;
33             $.each(allTabtitle, function (i, n) {
34                 if (n != currtab_title && n != onlyOpenTitle) {
35                     $('#tabs').tabs('close', n);
36                 }
37             });
38             break;
39         case "closeright":
40             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
41 
42             if (tabIndex == alltabs.length - 1) {
43                 alert('親，後邊沒有啦 ^@^!!');
44                 return false;
45             }
46             $.each(allTabtitle, function (i, n) {
47                 if (i > tabIndex) {
48                     if (n != onlyOpenTitle) {
49                         $('#tabs').tabs('close', n);
50                     }
51                 }
52             });
53             break;
54         case "closeleft":
55             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
56             if (tabIndex == 1) {
57                 alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!');
58                 return false;
59             }
60             $.each(allTabtitle, function (i, n) {
61                 if (i < tabIndex) {
62                     if (n != onlyOpenTitle) {
63                         $('#tabs').tabs('close', n);
64                     }
65                 }
66             });
67             break;
68         case "exit":
69             $('#closeMenu').menu('hide');
70             break;
71     }
72 }

　　整合js代碼：

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 var onlyOpenTitle = "首頁";//不允許關閉的标簽的标題
  2 $(function () {
  3     tabClose();
  4     tabCloseEven();
  5 })
  6 
  7 function tabClose() {
  8     /*輕按兩下關閉TAB頁籤*/
  9     $(".tabs-inner").dblclick(function () {
 10         var subtitle = $(this).children(".tabs-closable").text();
 11         $('#tabs').tabs('close', subtitle);
 12     })
 13     /*為頁籤綁定右鍵*/
 14     $(".tabs-inner").bind('contextmenu', function (e) {
 15         $('#mm').menu('show', {
 16             left: e.pageX,
 17             top: e.pageY
 18         });
 19         var subtitle = $(this).children(".tabs-closable").text();
 20         $('#mm').data("currtab", subtitle);
 21         $('#tabs').tabs('select', subtitle);
 22         return false;
 23     });
 24 }
 25 //綁定右鍵菜單事件
 26 function tabCloseEven() {
 27     $('#mm').menu({
 28         onClick: function (item) {
 29             closeTab(item.id);
 30         }
 31     });
 32     return false;
 33 }
 34 
 35 //建立/移除tab
 36 var index = 0;
 37 function addTab(subtitle, url, icon) {
 38     index++;
 39     if (!$('#tabs').tabs('exists', subtitle)) {
 40         $('#tabs').tabs('add', {
 41             title: 'Tab' + index,
 42             content: createFrame('http://www.baidu.com/'),
 43             closable: true,
 44             icon: ''
 45         });
 46     } else {
 47         $('#tabs').tabs('select', subtitle);
 48         $('#mm-tabupdate').click();
 49     }
 50     tabClose();
 51 }
 52 function removeTab() {
 53     var tab = $('#tabs').tabs('getSelected');
 54     if (tab) {
 55         var index = $('#tabs').tabs('getTabIndex', tab);
 56         $('#tabs').tabs('close', index);
 57     }
 58 }
 59 //建立Frame
 60 function createFrame(url) {
 61     var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
 62     return s;
 63 }
 64 
 65 //關閉tab
 66 function closeTab(action) {
 67     var alltabs = $('#tabs').tabs('tabs');
 68     var currentTab = $('#tabs').tabs('getSelected');
 69     var allTabtitle = [];
 70     $.each(alltabs, function (i, n) {
 71         allTabtitle.push($(n).panel('options').title);
 72     })
 73     switch (action) {
 74         case "refresh":
 75             var iframe = $(currentTab.panel('options').content);
 76             var src = iframe.attr('src');
 77             $('#tabs').tabs('update', {
 78                 tab: currentTab,
 79                 options: {
 80                     content: createFrame(src)
 81                 }
 82             })
 83             break;
 84         case "close":
 85             var currtab_title = currentTab.panel('options').title;
 86             $('#tabs').tabs('close', currtab_title);
 87             break;
 88         case "closeall":
 89             $.each(allTabtitle, function (i, n) {
 90                 if (n != onlyOpenTitle) {
 91                     $('#tabs').tabs('close', n);
 92                 }
 93             });
 94             break;
 95         case "closeother":
 96             var currtab_title = currentTab.panel('options').title;
 97             $.each(allTabtitle, function (i, n) {
 98                 if (n != currtab_title && n != onlyOpenTitle) {
 99                     $('#tabs').tabs('close', n);
100                 }
101             });
102             break;
103         case "closeright":
104             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
105 
106             if (tabIndex == alltabs.length - 1) {
107                 alert('親，後邊沒有啦 ^@^!!');
108                 return false;
109             }
110             $.each(allTabtitle, function (i, n) {
111                 if (i > tabIndex) {
112                     if (n != onlyOpenTitle) {
113                         $('#tabs').tabs('close', n);
114                     }
115                 }
116             });
117             break;
118         case "closeleft":
119             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
120             if (tabIndex == 1) {
121                 alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!');
122                 return false;
123             }
124             $.each(allTabtitle, function (i, n) {
125                 if (i < tabIndex) {
126                     if (n != onlyOpenTitle) {
127                         $('#tabs').tabs('close', n);
128                     }
129                 }
130             });
131             break;
132         case "exit":
133             $('#closeMenu').menu('hide');
134             break;
135     }
136 }

　　html代碼：

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EasyUIDemo._Default" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
10     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
11     <link href="css/admin.css" rel="stylesheet" />
12     <script src="EasyUI/jquery.min.js"></script>
13     <script src="EasyUI/jquery.easyui.min.js"></script>
14     <script src="js/common.js"></script>
15 </head>
16 <body class="easyui-layout" data-options="fit:true,scroll:'no'">
17     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">
18         <img src="images/logo.png" />EasyUIDemo
19     </div>
20     <div data-options="region:'west',split:true,title:'導航菜單'" style="width: 170px;">
21         <div class="easyui-accordion" data-options="fit:true,border:false">
22             <div title="系統設定1" data-options="selected:true">
23                 <div style="margin: 5px">
24                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">
25                         <li data-options="iconCls:'icon-group'">
26                             <span>基本設定</span>
27                             <ul>
28                                 <li data-options="iconCls:'icon-group_add'">
29                                     <span>test1</span>
30                                 </li>
31                                 <li data-options="iconCls:'icon-group_delete'">
32                                     <span>test2</span>
33                                 </li>
34                                 <li data-options="iconCls:'icon-group_edit'">
35                                     <span>test3</span>
36                                 </li>
37                             </ul>
38                         </li>
39                         <li data-options="state:'closed',iconCls:'icon-joystick'">
40                             <span>系統設定</span>
41                             <ul>
42                                 <li data-options="iconCls:'icon-joystick_add'">
43                                     <span>test4</span>
44                                 </li>
45                             </ul>
46                         </li>
47                     </ul>
48                 </div>
49             </div>
50             <div title="系統設定2" style="padding: 10px;">
51                 content2
52             </div>
53             <div title="系統設定3" style="padding: 10px">
54                 content3
55             </div>
56         </div>
57     </div>
58     <div data-options="region:'south',border:false" style="height: 23px;">
59         <div class="footer">EasyUIDemo</div>
60     </div>
61     <div data-options="region:'center'">
62         <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true,border:false" >
63             <div title="首頁" data-options="iconCls:'icon-house'" style="padding: 10px;">首頁</div>
64         </div>
65         <div id="tab-tools">
66             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addTab()"></a>
67             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removeTab()"></a>
68         </div>
69     </div>
70     <div id="mm" class="easyui-menu" style="width: 150px;">
71         <div id="refresh" data-options="iconCls:'icon-arrow_refresh'">重新整理</div>
72         <div class="menu-sep"></div>
73         <div id="close">關閉</div>
74         <div id="closeall">全部關閉</div>
75         <div id="closeother">除此之外全部關閉</div>
76         <div class="menu-sep"></div>
77         <div id="closeright">目前頁右側全部關閉</div>
78         <div id="closeleft">目前頁左側全部關閉</div>
79         <div class="menu-sep"></div>
80         <div id="exit">退出</div>
81     </div>
82 </body>
83 </html>
初試JqueryEasyUI（附Demo）

6，表單Form

　　内容管理少不了form表單，其實在easyui使用form表單最簡單，樣式、驗證、布局等都是提供的，隻要我們簡單設定一下屬性就可以了，demo檔案夾-form檔案夾下的basic.html，我們看下文本框的代碼：

1  <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input>

　　easyui-validatebox訓示驗證文本控件，data-options="required:true,validType:'email'"，required表示文本框必輸，validType表示驗證文本框方式，當然也支援其他url、電話驗證等，詳細的驗證資訊可以在demo檔案夾-validatebox檔案夾檢視示例。form表單沒什麼說的，大家看示例demo就可以找到想要的東西。

　　這邊需要注意的是驗證預設是英文，中文的話需要引用中文包：<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>EasyUI from</title>
 6     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
 7     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
 8     <link href="css/admin.css" rel="stylesheet" />
 9     <script src="EasyUI/jquery.min.js"></script>
10     <script src="EasyUI/jquery.easyui.min.js"></script>
11     <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
12 </head>
13 <body>
14     <div style="margin: 10px 0;"></div>
15         <div style="padding: 10px 0 10px 60px">
16             <form id="ff" method="post">
17                 <table>
18                     <tr>
19                         <td>名稱:</td>
20                         <td>
21                             <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
22                     </tr>
23                     <tr>
24                         <td>郵箱:</td>
25                         <td>
26                             <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
27                     </tr>
28                     <tr>
29                         <td>标題:</td>
30                         <td>
31                             <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
32                     </tr>
33                     <tr>
34                         <td>内容:</td>
35                         <td>
36                             <textarea name="message" style="height: 60px;"></textarea></td>
37                     </tr>
38                     <tr>
39                         <td>語言:</td>
40                         <td>
41                             <select class="easyui-combobox" name="language">
42                                 <option value="ar">Arabic</option>
43                                 <option value="bg">Bulgarian</option>
44                                 <option value="ca">Catalan</option>
45                                 <option value="zh-cht">Chinese Traditional</option>
46                                 <option value="cs">Czech</option>
47                                 <option value="da">Danish</option>
48                                 <option value="nl">Dutch</option>
49                                 <option value="en" selected="selected">English</option>
50                                 <option value="et">Estonian</option>
51                                 <option value="fi">Finnish</option>
52                                 <option value="fr">French</option>
53                                 <option value="de">German</option>
54                                 <option value="el">Greek</option>
55                                 <option value="ht">Haitian Creole</option>
56                                 <option value="he">Hebrew</option>
57                                 <option value="hi">Hindi</option>
58                                 <option value="mww">Hmong Daw</option>
59                                 <option value="hu">Hungarian</option>
60                                 <option value="id">Indonesian</option>
61                                 <option value="it">Italian</option>
62                                 <option value="ja">Japanese</option>
63                                 <option value="ko">Korean</option>
64                                 <option value="lv">Latvian</option>
65                                 <option value="lt">Lithuanian</option>
66                                 <option value="no">Norwegian</option>
67                                 <option value="fa">Persian</option>
68                                 <option value="pl">Polish</option>
69                                 <option value="pt">Portuguese</option>
70                                 <option value="ro">Romanian</option>
71                                 <option value="ru">Russian</option>
72                                 <option value="sk">Slovak</option>
73                                 <option value="sl">Slovenian</option>
74                                 <option value="es">Spanish</option>
75                                 <option value="sv">Swedish</option>
76                                 <option value="th">Thai</option>
77                                 <option value="tr">Turkish</option>
78                                 <option value="uk">Ukrainian</option>
79                                 <option value="vi">Vietnamese</option>
80                             </select>
81                         </td>
82                     </tr>
83                 </table>
84             </form>
85         </div>
86         <div style=" padding: 5px; margin-left:100px;">
87             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">送出</a>
88             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
89         </div>
90     <script>
91         function submitForm() {
92             $('#ff').form('submit');
93         }
94         function clearForm() {
95             $('#ff').form('clear');
96         }
97     </script>
98 </body>
99 </html>
初試JqueryEasyUI（附Demo）

7，對話框Dialog

　　使用dialog和使用form一樣簡單，demo檔案夾-Dialog檔案夾下的toolbarbuttons.html，我們建立一個表單送出後對話框提示。

1     <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"
 2         data-options="
 3                 iconCls: 'icon-save',
 4                 buttons: [{
 5                     text:'Ok',
 6                     iconCls:'icon-ok',
 7                     handler:function(){
 8                         alert('ok');
 9                     }
10                 },{
11                     text:'Cancel',
12                     handler:function(){
13                         alert('cancel');;
14                     }
15                 }]
16             ">
17         确認送出嗎？
18     </div>

　　在data-options-buttons選項，表示對話框下方的按鈕集合，也有在标題下方的按鈕集合，屬性是toolbar，打開dialog代碼：$('#dlg').dialog('open')，關閉參數改為：close即可。dialog裡的内容可以嵌套div，也可以嵌套frame，這個可以随意擴充。

初試JqueryEasyUI（附Demo）
初試JqueryEasyUI（附Demo）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>EasyUI from</title>
  6     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
  7     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
  8     <link href="css/admin.css" rel="stylesheet" />
  9     <script src="EasyUI/jquery.min.js"></script>
 10     <script src="EasyUI/jquery.easyui.min.js"></script>
 11     <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
 12 </head>
 13 <body>
 14     <div style="margin: 10px 0;"></div>
 15     <div style="padding: 10px 0 10px 60px">
 16         <form id="ff" method="post">
 17             <table>
 18                 <tr>
 19                     <td>名稱:</td>
 20                     <td>
 21                         <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
 22                 </tr>
 23                 <tr>
 24                     <td>郵箱:</td>
 25                     <td>
 26                         <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
 27                 </tr>
 28                 <tr>
 29                     <td>标題:</td>
 30                     <td>
 31                         <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
 32                 </tr>
 33                 <tr>
 34                     <td>内容:</td>
 35                     <td>
 36                         <textarea name="message" style="height: 60px;"></textarea></td>
 37                 </tr>
 38                 <tr>
 39                     <td>語言:</td>
 40                     <td>
 41                         <select class="easyui-combobox" name="language">
 42                             <option value="ar">Arabic</option>
 43                             <option value="bg">Bulgarian</option>
 44                             <option value="ca">Catalan</option>
 45                             <option value="zh-cht">Chinese Traditional</option>
 46                             <option value="cs">Czech</option>
 47                             <option value="da">Danish</option>
 48                             <option value="nl">Dutch</option>
 49                             <option value="en" selected="selected">English</option>
 50                             <option value="et">Estonian</option>
 51                             <option value="fi">Finnish</option>
 52                             <option value="fr">French</option>
 53                             <option value="de">German</option>
 54                             <option value="el">Greek</option>
 55                             <option value="ht">Haitian Creole</option>
 56                             <option value="he">Hebrew</option>
 57                             <option value="hi">Hindi</option>
 58                             <option value="mww">Hmong Daw</option>
 59                             <option value="hu">Hungarian</option>
 60                             <option value="id">Indonesian</option>
 61                             <option value="it">Italian</option>
 62                             <option value="ja">Japanese</option>
 63                             <option value="ko">Korean</option>
 64                             <option value="lv">Latvian</option>
 65                             <option value="lt">Lithuanian</option>
 66                             <option value="no">Norwegian</option>
 67                             <option value="fa">Persian</option>
 68                             <option value="pl">Polish</option>
 69                             <option value="pt">Portuguese</option>
 70                             <option value="ro">Romanian</option>
 71                             <option value="ru">Russian</option>
 72                             <option value="sk">Slovak</option>
 73                             <option value="sl">Slovenian</option>
 74                             <option value="es">Spanish</option>
 75                             <option value="sv">Swedish</option>
 76                             <option value="th">Thai</option>
 77                             <option value="tr">Turkish</option>
 78                             <option value="uk">Ukrainian</option>
 79                             <option value="vi">Vietnamese</option>
 80                         </select>
 81                     </td>
 82                 </tr>
 83             </table>
 84         </form>
 85     </div>
 86     <div style="padding: 5px; margin-left: 100px;">
 87         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">送出</a>
 88         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
 89     </div>
 90     <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"
 91         data-options="
 92                 iconCls: 'icon-save',
 93                 buttons: [{
 94                     text:'Ok',
 95                     iconCls:'icon-ok',
 96                     handler:function(){
 97                         alert('ok');
 98                     }
 99                 },{
100                     text:'Cancel',
101                     handler:function(){
102                         alert('cancel');;
103                     }
104                 }]
105             ">
106         确認送出嗎？
107     </div>
108     <script>
109         $(function () {
110             $('#dlg').dialog('close')
111         })
112         function submitForm() {
113             $('#dlg').dialog('open')
114             //$('#ff').form('submit');
115         }
116         function clearForm() {
117             $('#ff').form('clear');
118         }
119     </script>
120 </body>
121 </html>
初試JqueryEasyUI（附Demo）

8，示例Demo下載下傳

　　下載下傳位址：http://pan.baidu.com/s/1c09YVi4

後記

　　easyui預設提供了幾個icons的圖示，在themes檔案夾下的icons檔案夾中，我們在做樹菜單的時候會用到其他的小圖示：

初試JqueryEasyUI（附Demo）

　　網上找了一個包，還蠻全的，分享給大家，下載下傳位址：http://pan.baidu.com/s/1hqKGehQ

　　關于easyui簡單demo就寫到這裡，下篇計劃集合編輯器，在下篇計劃把靜态demo變成動态（asp.net、ef），建立一個簡單的新聞釋出系統demo，再下篇計劃結合mvc，再下篇。。。最後應用到個站中，敬請期待。

　　如果你覺得本篇文章對你有所幫助，請點選右下部“推薦”，^_^

　　參考教程：

  • http://www.w3cschool.cc/jeasyui/jqueryeasyui-tutorial.html
  • http://www.jeasyui.com/demo/main/index.php

作者：田園裡的蟋蟀

微信公衆号：你好架構

出處：http://www.cnblogs.com/xishuai/

公衆号會不定時的分享有關架構的方方面面，包含并不局限于：Microservices（微服務）、Service Mesh（服務網格）、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD（持續內建/持續部署）、DevOps等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

分享到：

QQ空間

新浪微網誌

騰訊微網誌

微信

更多

[13]小菜學習程式設計-建站始末 [10]小菜學習程式設計-ControlDesign
上一篇: C++讀取、旋轉和儲存bmp圖像檔案程式設計實作
下一篇: Spark叢集基于Zookeeper的HA搭建部署筆記

繼續閱讀