初试JqueryEasyUI（附Demo）

写在前面

准备
布局Layout
菜单树Tree
内容页Tabs
右键菜单Menu
表单Form
对话框Dialog
示例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，基本上是我们需要的效果，复制一下，把高度和宽度修改一下（设置百分比）：

　　但是浏览一下会发现页面什么也没有，当时很莫名奇妙，试了好久才发现，class="easyui-layout"必须放在body标签里面，通过上面截图可以看到north、south、west、east和center分别代表五个部分，我们不需要east导航可以直接删掉，简单修改下就是我们想要的效果，示例代码：

 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

　　效果：

3，菜单树Tree

　　基本的布局创建好了之后，我们需要在左部添加菜单树，我们选取的是demo文件夹-tree文件夹下的lines.html，复制一下添加在west左部div下，lines示例是从json文件中读取树的，我们可以从basic.html中看到创建tree的格式，state:'closed'表示此接单关闭，默认是打开。

　　关于tree自定义节点图标，icons.html是自定义节点图标示例，但是从json读取的，格式为："iconCls":"icon-remove"；运行可以看到源代码：

　　当时设置以为在span标签设置图标样式，但是并不起作用，花了很多时间尝试，发现原来要在li标签设置，通过这个示例需要提醒大家的是，在用easyui布局的时候，不要查看样式布局，因为运行后都是easyui生成的源代码，并不是原始的，按照这个设置起来会有些问题。

　　简单设置一下，就是我们要的效果，示例代码：

 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>

View Code

　　效果：

4，内容页Tabs

　　菜单tree创建好了，接下来就是center部分的内容页，我们选取的是demo文件夹-tabs文件夹下的tabstools.html，此示例有tools方便我们扩展，在做添加tabs的时候花了很多时间，一个是tabs添加center里面，另一个是tools样式问题，关于第一个还好，经过多次尝试，嵌套里面去了，第二个问题我们先看下截图：

　　不知怎的？在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，设置好了自动设置样式，不需要你手动的设置。

　　示例代码：

 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>

View Code

　　效果：

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代码：

  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 }

View Code

　　html代码：

 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>

View Code

　　效果：

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>

　　html代码：

 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>

View Code

　　效果：

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，这个可以随意扩展。

　　html代码：

  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>

View Code

　　效果：

8，示例Demo下载

　　下载地址：http://pan.baidu.com/s/1c09YVi4

后记

　　easyui默认提供了几个icons的图标，在themes文件夹下的icons文件夹中，我们在做树菜单的时候会用到其他的小图标：

　　网上找了一个包，还蛮全的，分享给大家，下载地址：http://pan.baidu.com/s/1hqKGehQ

　　关于easyui简单demo就写到这里，下篇计划集合编辑器，在下篇计划把静态demo变成动态（asp.net、ef），创建一个简单的新闻发布系统demo，再下篇计划结合mvc，再下篇。。。最后应用到个站中，敬请期待。

　　如果你觉得本篇文章对你有所帮助，请点击右下部“推荐”，^_^

　　参考教程：

posted @ 2014-03-26 09:00 田园里的蟋蟀阅读(42317) 评论(56) 编辑收藏举报

刷新页面返回顶部

田园里的蟋蟀

写代码，写博客，学英语。

初试JqueryEasyUI（附Demo）

写在前面

一步一个脚印

1，准备

2，布局Layout

3，菜单树Tree

4，内容页Tabs

5，右键菜单Menu

6，表单Form

7，对话框Dialog

8，示例Demo下载

后记

公告