初试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：

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <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导航可以直接删掉，简单修改下就是我们想要的效果，示例代码：

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head id="Head1" runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

 </head>

 <body class="easyui-layout">

     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">

         <img src="data:images/logo.png" />EasyUIDemo

     </div>

     <div data-options="region:'south',border:false" style="height: 23px;">

         <div class="footer">EasyUIDemo</div>

     </div>

     <div data-options="region:'west',split:true" title="West" style="width: 170px;"></div>

     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

         <table class="easyui-datagrid"

             data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">

             <thead>

                 <tr>

                     <th data-options="field:'itemid'" width="80">Item ID</th>

                     <th data-options="field:'productid'" width="100">Product ID</th>

                     <th data-options="field:'listprice',align:'right'" width="80">List Price</th>

                     <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

                     <th data-options="field:'attr'" width="150">Attribute</th>

                     <th data-options="field:'status',align:'center'" width="50">Status</th>

                 </tr>

             </thead>

         </table>

     </div>

 </body>

 </html>

　　效果：

初试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生成的源代码，并不是原始的，按照这个设置起来会有些问题。

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

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="EasyUIDemo.WebForm2" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head id="Head1" runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

 </head>

 <body class="easyui-layout">

     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">

         <img src="data:images/logo.png" />EasyUIDemo

     </div>

     <div data-options="region:'south',border:false" style="height: 23px;">

         <div class="footer">EasyUIDemo</div>

     </div>

     <div data-options="region:'west',split:true" title="West" style="width: 170px;">

         <div class="easyui-accordion" data-options="fit:true,border:false">

             <div title="系统设置1" data-options="selected:true">

                 <div style="margin: 5px">

                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">

                         <li data-options="iconCls:'icon-group'">

                             <span>基本设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-group_add'">

                                     <span>test1</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_delete'">

                                     <span>test2</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_edit'">

                                     <span>test3</span>

                                 </li>

                             </ul>

                         </li>

                         <li data-options="state:'closed',iconCls:'icon-joystick'">

                             <span>系统设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-joystick_add'">

                                     <span>test4</span>

                                 </li>

                             </ul>

                         </li>

                     </ul>

                 </div>

             </div>

             <div title="系统设置2" style="padding: 10px;">

                 content2

             </div>

             <div title="系统设置3" style="padding: 10px">

                 content3

             </div>

         </div>

     </div>

     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

         <table class="easyui-datagrid"

             data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">

             <thead>

                 <tr>

                     <th data-options="field:'itemid'" width="80">Item ID</th>

                     <th data-options="field:'productid'" width="100">Product ID</th>

                     <th data-options="field:'listprice',align:'right'" width="80">List Price</th>

                     <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>

                     <th data-options="field:'attr'" width="150">Attribute</th>

                     <th data-options="field:'status',align:'center'" width="50">Status</th>

                 </tr>

             </thead>

         </table>

     </div>

 </body>

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

　　示例代码：

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EasyUIDemo.WebForm1" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

 </head>

 <body class="easyui-layout">

     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">

         <img src="data:images/logo.png" />EasyUIDemo

     </div>

     <div data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;">

         <div class="easyui-accordion" data-options="fit:true,border:false">

             <div title="系统设置1" data-options="selected:true">

                 <div style="margin: 5px">

                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">

                         <li data-options="iconCls:'icon-group'">

                             <span>基本设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-group_add'">

                                     <span>test1</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_delete'">

                                     <span>test2</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_edit'">

                                     <span>test3</span>

                                 </li>

                             </ul>

                         </li>

                         <li data-options="state:'closed',iconCls:'icon-joystick'">

                             <span>系统设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-joystick_add'">

                                     <span>test4</span>

                                 </li>

                             </ul>

                         </li>

                     </ul>

                 </div>

             </div>

             <div title="系统设置2" style="padding: 10px;">

                 content2

             </div>

             <div title="系统设置3" style="padding: 10px">

                 content3

             </div>

         </div>

     </div>

     <div data-options="region:'south',border:false" style="height: 23px;">

         <div class="footer">EasyUIDemo</div>

     </div>

     <div data-options="region:'center'">

         <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'">

             <div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px; height: 100%;">主页</div>

         </div>

         <div id="tab-tools">

             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>

             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>

         </div>

     </div>

     <script type="text/javascript">

         var index = 0;

         function addPanel() {

             index++;

             $('#tabs').tabs('add', {

                 title: 'Tab' + index,

                 content: '<div style="padding:10px">Content' + index + '</div>',

                 closable: true

             });

         }

         function removePanel() {

             var tab = $('#tabs').tabs('getSelected');

             if (tab) {

                 var index = $('#tabs').tabs('getTabIndex', tab);

                 $('#tabs').tabs('close', index);

             }

         }

     </script>

 </body>

 </html>

　　效果：

初试JqueryEasyUI（附Demo）

5，右键菜单Menu

　　tab创建好之后，我们需要在tab添加右键menu，以便我们的tab操作，demo文件夹-menu文件夹下的basic.html，我们把代码复制过来，可以看到先创建一个div指示右键menu，js绑定右击代码：

         $(function(){

             $(document).bind('contextmenu',function(e){

                 e.preventDefault();

                 $('#mm').menu('show', {

                     left: e.pageX,

                     top: e.pageY

                 });

             });

         });

　　上面代码是绑定区域是整个页面，我们需要修改一下：把$(document) 改成$(".tabs-inner")，.tabs-inner是每个tab的css，查看页面源代码我们就可以看到。

　　绑定右击事件后，下面就是关闭tab了，easyui提供了关闭tab的接口：$('#tabs').tabs('close', tab标题);根据此接口我们可以扩展其他的菜单，比如关闭全部，除此之外全部关闭等等，就像vs的tab管理一样。

　　tab管理代码：

 //关闭tab

 function closeTab(action) {

     var alltabs = $('#tabs').tabs('tabs');

     var currentTab = $('#tabs').tabs('getSelected');

     var allTabtitle = [];

     $.each(alltabs, function (i, n) {

         allTabtitle.push($(n).panel('options').title);

     })

     switch (action) {

         case "refresh":

             var iframe = $(currentTab.panel('options').content);

             var src = iframe.attr('src');

             $('#tabs').tabs('update', {

                 tab: currentTab,

                 options: {

                     content: createFrame(src)

                 }

             })

             break;

         case "close":

             var currtab_title = currentTab.panel('options').title;

             $('#tabs').tabs('close', currtab_title);

             break;

         case "closeall":

             $.each(allTabtitle, function (i, n) {

                 if (n != onlyOpenTitle) {

                     $('#tabs').tabs('close', n);

                 }

             });

             break;

         case "closeother":

             var currtab_title = currentTab.panel('options').title;

             $.each(allTabtitle, function (i, n) {

                 if (n != currtab_title && n != onlyOpenTitle) {

                     $('#tabs').tabs('close', n);

                 }

             });

             break;

         case "closeright":

             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

             if (tabIndex == alltabs.length - 1) {

                 alert('亲，后边没有啦 ^@^!!');

                 return false;

             }

             $.each(allTabtitle, function (i, n) {

                 if (i > tabIndex) {

                     if (n != onlyOpenTitle) {

                         $('#tabs').tabs('close', n);

                     }

                 }

             });

             break;

         case "closeleft":

             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

             if (tabIndex == 1) {

                 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');

                 return false;

             }

             $.each(allTabtitle, function (i, n) {

                 if (i < tabIndex) {

                     if (n != onlyOpenTitle) {

                         $('#tabs').tabs('close', n);

                     }

                 }

             });

             break;

         case "exit":

             $('#closeMenu').menu('hide');

             break;

     }

 }

　　整合js代码：

 var onlyOpenTitle = "主页";//不允许关闭的标签的标题

 $(function () {

     tabClose();

     tabCloseEven();

 })

 function tabClose() {

     /*双击关闭TAB选项卡*/

     $(".tabs-inner").dblclick(function () {

         var subtitle = $(this).children(".tabs-closable").text();

         $('#tabs').tabs('close', subtitle);

     })

     /*为选项卡绑定右键*/

     $(".tabs-inner").bind('contextmenu', function (e) {

         $('#mm').menu('show', {

             left: e.pageX,

             top: e.pageY

         });

         var subtitle = $(this).children(".tabs-closable").text();

         $('#mm').data("currtab", subtitle);

         $('#tabs').tabs('select', subtitle);

         return false;

     });

 }

 //绑定右键菜单事件

 function tabCloseEven() {

     $('#mm').menu({

         onClick: function (item) {

             closeTab(item.id);

         }

     });

     return false;

 }

 //创建/移除tab

 var index = 0;

 function addTab(subtitle, url, icon) {

     index++;

     if (!$('#tabs').tabs('exists', subtitle)) {

         $('#tabs').tabs('add', {

             title: 'Tab' + index,

             content: createFrame('http://www.baidu.com/'),

             closable: true,

             icon: ''

         });

     } else {

         $('#tabs').tabs('select', subtitle);

         $('#mm-tabupdate').click();

     }

     tabClose();

 }

 function removeTab() {

     var tab = $('#tabs').tabs('getSelected');

     if (tab) {

         var index = $('#tabs').tabs('getTabIndex', tab);

         $('#tabs').tabs('close', index);

     }

 }

 //创建Frame

 function createFrame(url) {

     var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';

     return s;

 }

 //关闭tab

 function closeTab(action) {

     var alltabs = $('#tabs').tabs('tabs');

     var currentTab = $('#tabs').tabs('getSelected');

     var allTabtitle = [];

     $.each(alltabs, function (i, n) {

         allTabtitle.push($(n).panel('options').title);

     })

     switch (action) {

         case "refresh":

             var iframe = $(currentTab.panel('options').content);

             var src = iframe.attr('src');

             $('#tabs').tabs('update', {

                 tab: currentTab,

                 options: {

                     content: createFrame(src)

                 }

             })

             break;

         case "close":

             var currtab_title = currentTab.panel('options').title;

             $('#tabs').tabs('close', currtab_title);

             break;

         case "closeall":

             $.each(allTabtitle, function (i, n) {

                 if (n != onlyOpenTitle) {

                     $('#tabs').tabs('close', n);

                 }

             });

             break;

         case "closeother":

             var currtab_title = currentTab.panel('options').title;

             $.each(allTabtitle, function (i, n) {

                 if (n != currtab_title && n != onlyOpenTitle) {

                     $('#tabs').tabs('close', n);

                 }

             });

             break;

         case "closeright":

             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

             if (tabIndex == alltabs.length - 1) {

                 alert('亲，后边没有啦 ^@^!!');

                 return false;

             }

             $.each(allTabtitle, function (i, n) {

                 if (i > tabIndex) {

                     if (n != onlyOpenTitle) {

                         $('#tabs').tabs('close', n);

                     }

                 }

             });

             break;

         case "closeleft":

             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

             if (tabIndex == 1) {

                 alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');

                 return false;

             }

             $.each(allTabtitle, function (i, n) {

                 if (i < tabIndex) {

                     if (n != onlyOpenTitle) {

                         $('#tabs').tabs('close', n);

                     }

                 }

             });

             break;

         case "exit":

             $('#closeMenu').menu('hide');

             break;

     }

 }

　　html代码：

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EasyUIDemo._Default" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

     <script src="js/common.js"></script>

 </head>

 <body class="easyui-layout" data-options="fit:true,scroll:'no'">

     <div data-options="region:'north',border:false" style="height: 74px; background: #2596ea; padding: 10px">

         <img src="data:images/logo.png" />EasyUIDemo

     </div>

     <div data-options="region:'west',split:true,title:'导航菜单'" style="width: 170px;">

         <div class="easyui-accordion" data-options="fit:true,border:false">

             <div title="系统设置1" data-options="selected:true">

                 <div style="margin: 5px">

                     <ul class="tree easyui-tree" data-options="animate:true,lines:true">

                         <li data-options="iconCls:'icon-group'">

                             <span>基本设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-group_add'">

                                     <span>test1</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_delete'">

                                     <span>test2</span>

                                 </li>

                                 <li data-options="iconCls:'icon-group_edit'">

                                     <span>test3</span>

                                 </li>

                             </ul>

                         </li>

                         <li data-options="state:'closed',iconCls:'icon-joystick'">

                             <span>系统设置</span>

                             <ul>

                                 <li data-options="iconCls:'icon-joystick_add'">

                                     <span>test4</span>

                                 </li>

                             </ul>

                         </li>

                     </ul>

                 </div>

             </div>

             <div title="系统设置2" style="padding: 10px;">

                 content2

             </div>

             <div title="系统设置3" style="padding: 10px">

                 content3

             </div>

         </div>

     </div>

     <div data-options="region:'south',border:false" style="height: 23px;">

         <div class="footer">EasyUIDemo</div>

     </div>

     <div data-options="region:'center'">

         <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools',fit:true,border:false" >

             <div title="主页" data-options="iconCls:'icon-house'" style="padding: 10px;">主页</div>

         </div>

         <div id="tab-tools">

             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addTab()"></a>

             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removeTab()"></a>

         </div>

     </div>

     <div id="mm" class="easyui-menu" style="width: 150px;">

         <div id="refresh" data-options="iconCls:'icon-arrow_refresh'">刷新</div>

         <div class="menu-sep"></div>

         <div id="close">关闭</div>

         <div id="closeall">全部关闭</div>

         <div id="closeother">除此之外全部关闭</div>

         <div class="menu-sep"></div>

         <div id="closeright">当前页右侧全部关闭</div>

         <div id="closeleft">当前页左侧全部关闭</div>

         <div class="menu-sep"></div>

         <div id="exit">退出</div>

     </div>

 </body>

 </html>

　　效果：

初试JqueryEasyUI（附Demo）

6，表单Form

　　内容管理少不了form表单，其实在easyui使用form表单最简单，样式、验证、布局等都是提供的，只要我们简单设置一下属性就可以了，demo文件夹-form文件夹下的basic.html，我们看下文本框的代码：

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>EasyUI from</title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

     <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

 </head>

 <body>

     <div style="margin: 10px 0;"></div>

         <div style="padding: 10px 0 10px 60px">

             <form id="ff" method="post">

                 <table>

                     <tr>

                         <td>名称:</td>

                         <td>

                             <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>

                     </tr>

                     <tr>

                         <td>邮箱:</td>

                         <td>

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

                     </tr>

                     <tr>

                         <td>标题:</td>

                         <td>

                             <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>

                     </tr>

                     <tr>

                         <td>内容:</td>

                         <td>

                             <textarea name="message" style="height: 60px;"></textarea></td>

                     </tr>

                     <tr>

                         <td>语言:</td>

                         <td>

                             <select class="easyui-combobox" name="language">

                                 <option value="ar">Arabic</option>

                                 <option value="bg">Bulgarian</option>

                                 <option value="ca">Catalan</option>

                                 <option value="zh-cht">Chinese Traditional</option>

                                 <option value="cs">Czech</option>

                                 <option value="da">Danish</option>

                                 <option value="nl">Dutch</option>

                                 <option value="en" selected="selected">English</option>

                                 <option value="et">Estonian</option>

                                 <option value="fi">Finnish</option>

                                 <option value="fr">French</option>

                                 <option value="de">German</option>

                                 <option value="el">Greek</option>

                                 <option value="ht">Haitian Creole</option>

                                 <option value="he">Hebrew</option>

                                 <option value="hi">Hindi</option>

                                 <option value="mww">Hmong Daw</option>

                                 <option value="hu">Hungarian</option>

                                 <option value="id">Indonesian</option>

                                 <option value="it">Italian</option>

                                 <option value="ja">Japanese</option>

                                 <option value="ko">Korean</option>

                                 <option value="lv">Latvian</option>

                                 <option value="lt">Lithuanian</option>

                                 <option value="no">Norwegian</option>

                                 <option value="fa">Persian</option>

                                 <option value="pl">Polish</option>

                                 <option value="pt">Portuguese</option>

                                 <option value="ro">Romanian</option>

                                 <option value="ru">Russian</option>

                                 <option value="sk">Slovak</option>

                                 <option value="sl">Slovenian</option>

                                 <option value="es">Spanish</option>

                                 <option value="sv">Swedish</option>

                                 <option value="th">Thai</option>

                                 <option value="tr">Turkish</option>

                                 <option value="uk">Ukrainian</option>

                                 <option value="vi">Vietnamese</option>

                             </select>

                         </td>

                     </tr>

                 </table>

             </form>

         </div>

         <div style=" padding: 5px; margin-left:100px;">

             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>

             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>

         </div>

     <script>

         function submitForm() {

             $('#ff').form('submit');

         }

         function clearForm() {

             $('#ff').form('clear');

         }

     </script>

 </body>

 </html>

　　效果：

初试JqueryEasyUI（附Demo）

7，对话框Dialog

　　使用dialog和使用form一样简单，demo文件夹-Dialog文件夹下的toolbarbuttons.html，我们创建一个表单提交后对话框提示。

     <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"

         data-options="

                 iconCls: 'icon-save',

                 buttons: [{

                     text:'Ok',

                     iconCls:'icon-ok',

                     handler:function(){

                         alert('ok');

                     }

                 },{

                     text:'Cancel',

                     handler:function(){

                         alert('cancel');;

                     }

                 }]

             ">

         确认提交吗？

     </div>

　　在data-options-buttons选项，表示对话框下方的按钮集合，也有在标题下方的按钮集合，属性是toolbar，打开dialog代码：$('#dlg').dialog('open')，关闭参数改为：close即可。dialog里的内容可以嵌套div，也可以嵌套frame，这个可以随意扩展。

　　html代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>EasyUI from</title>

     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />

     <link href="EasyUI/themes/icon.css" rel="stylesheet" />

     <link href="css/admin.css" rel="stylesheet" />

     <script src="EasyUI/jquery.min.js"></script>

     <script src="EasyUI/jquery.easyui.min.js"></script>

     <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

 </head>

 <body>

     <div style="margin: 10px 0;"></div>

     <div style="padding: 10px 0 10px 60px">

         <form id="ff" method="post">

             <table>

                 <tr>

                     <td>名称:</td>

                     <td>

                         <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>

                 </tr>

                 <tr>

                     <td>邮箱:</td>

                     <td>

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

                 </tr>

                 <tr>

                     <td>标题:</td>

                     <td>

                         <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>

                 </tr>

                 <tr>

                     <td>内容:</td>

                     <td>

                         <textarea name="message" style="height: 60px;"></textarea></td>

                 </tr>

                 <tr>

                     <td>语言:</td>

                     <td>

                         <select class="easyui-combobox" name="language">

                             <option value="ar">Arabic</option>

                             <option value="bg">Bulgarian</option>

                             <option value="ca">Catalan</option>

                             <option value="zh-cht">Chinese Traditional</option>

                             <option value="cs">Czech</option>

                             <option value="da">Danish</option>

                             <option value="nl">Dutch</option>

                             <option value="en" selected="selected">English</option>

                             <option value="et">Estonian</option>

                             <option value="fi">Finnish</option>

                             <option value="fr">French</option>

                             <option value="de">German</option>

                             <option value="el">Greek</option>

                             <option value="ht">Haitian Creole</option>

                             <option value="he">Hebrew</option>

                             <option value="hi">Hindi</option>

                             <option value="mww">Hmong Daw</option>

                             <option value="hu">Hungarian</option>

                             <option value="id">Indonesian</option>

                             <option value="it">Italian</option>

                             <option value="ja">Japanese</option>

                             <option value="ko">Korean</option>

                             <option value="lv">Latvian</option>

                             <option value="lt">Lithuanian</option>

                             <option value="no">Norwegian</option>

                             <option value="fa">Persian</option>

                             <option value="pl">Polish</option>

                             <option value="pt">Portuguese</option>

                             <option value="ro">Romanian</option>

                             <option value="ru">Russian</option>

                             <option value="sk">Slovak</option>

                             <option value="sl">Slovenian</option>

                             <option value="es">Spanish</option>

                             <option value="sv">Swedish</option>

                             <option value="th">Thai</option>

                             <option value="tr">Turkish</option>

                             <option value="uk">Ukrainian</option>

                             <option value="vi">Vietnamese</option>

                         </select>

                     </td>

                 </tr>

             </table>

         </form>

     </div>

     <div style="padding: 5px; margin-left: 100px;">

         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>

         <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>

     </div>

     <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"

         data-options="

                 iconCls: 'icon-save',

                 buttons: [{

                     text:'Ok',

                     iconCls:'icon-ok',

                     handler:function(){

                         alert('ok');

                     }

                 },{

                     text:'Cancel',

                     handler:function(){

                         alert('cancel');;

                     }

                 }]

             ">

         确认提交吗？

     </div>

     <script>

         $(function () {

             $('#dlg').dialog('close')

         })

         function submitForm() {

             $('#dlg').dialog('open')

             //$('#ff').form('submit');

         }

         function clearForm() {

             $('#ff').form('clear');

         }

     </script>

 </body>

 </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，再下篇。。。最后应用到个站中，敬请期待。

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

　　参考教程：

秒客网

初试JqueryEasyUI（附Demo）

写在前面

一步一个脚印

1，准备

2，布局Layout

3，菜单树Tree

4，内容页Tabs

5，右键菜单Menu

6，表单Form

7，对话框Dialog

8，示例Demo下载

后记

相关文章