初試JqueryEasyUI（附Demo）
寫在前面
關於easyui很少說，對於咱們這樣沒有美術功底的程序員來講，簡直是大大的福利，園裏面也有很多人在用，本身在整理一個個站，後臺管理要用，正好能夠學習下。網上找了相關的教程什麼的，可是發現仍是官網上的demo講的狠詳細，還有就是下載後的demo示例，但都是某個控件示例，很遺憾，沒有整個系統的demo。javascript
下面咱們就一步一步來建立，在作的過程也有許多的問題，對於菜鳥的咱們來講，享受其中才是最重要的。php
本身動手，豐衣足食。css
一步一個腳印
1，準備
http://www.jeasyui.com/download/index.php下載最新的easyui包，裏面有個demo文件夾，開發的時候儘可能別刪了，咱們在作的過程當中能夠參照裏面的demo示例，使用easyui須要引用下面四個css和js：html
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文件夾下會發現有幾種皮膚，能夠切換樣式更換不一樣的控件風格。java
第二個icon.css是圖標樣式，增長圖標按照已有規則建立，下面兩個js引用就很少說了。jquery
2，佈局Layout
後臺管理系統通常都是分爲四個部分，上部是logo或標題，左部是菜單，下部是版權信息，右部是內容信息。在easyui中咱們可使用Layout進行佈局，在demo文件夾-Layout文件夾下的basic.html，基本上是咱們須要的效果，複製一下，把高度和寬度修改一下（設置百分比）：程序員
可是瀏覽一下會發現頁面什麼也沒有，當時很莫名奇妙，試了很久才發現，class="easyui-layout"必須放在body標籤裏面，經過上面截圖能夠看到north、south、west、east和center分別表明五個部分，咱們不須要east導航能夠直接刪掉，簡單修改下就是咱們想要的效果，示例代碼：web
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>
效果：json
3，菜單樹Tree
基本的佈局建立好了以後，咱們須要在左部添加菜單樹，咱們選取的是demo文件夾-tree文件夾下的lines.html，複製一下添加在west左部div下，lines示例是從json文件中讀取樹的，咱們能夠從basic.html中看到建立tree的格式，state:'closed'表示此接單關閉，默認是打開。mvc
關於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>
效果：
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>
效果：
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 }
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>
效果：
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>
效果：
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>
效果：
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，再下篇。。。最後應用到個站中，敬請期待。
若是你以爲本篇文章對你有所幫助，請點擊右下部「推薦」，^_^
參考教程：
相關文章
- 1. 初試Code First（附Demo）
- 2. JQueryEasyUI學習簡單Demo
- 3. 初試ASP.NET Web API/MVC API（附Demo）
- 4. TensorFlow Lite for Android 初探(附demo）
- 5. JqueryEasyUI $.Parser
- 6. golang初試websocket之echo demo
- 7. React Native之初試小Demo
- 8. React-Hooks(附demo)
- 9. Windows服務調試小結（附Demo）
- 10. 隊列+BFS（附vector初試）
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Eclipse Debug 調試 - Eclipse 教程
- • 適用於PHP初學者的學習線路和建議
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
