EasyUI、JQuery表單驗證
A.EasyUI
1.概述
是一組基於JQuery的UI插件框架，提供了創建網頁所需的一切
幫助開發者輕鬆打造出功能豐富且美觀的web網頁
2.特點
a.基於jquery庫的插件集合
b.支持javascript和html標記兩種渲染方式
c.支持根據需求擴展插件
3.框架介紹
demo：插件示例
locale： 國際化js文件
plugins: 組件的js文件
themes：組件樣式文件
4.步驟
a.在easyui官網下載相應的文件
b.在頁面引入相應的js文件和css樣式文件
js：jquery.js/jquery.easyui.js/easyui-lang-zh_CN.js
css: easyui.css/icon.css
備註：通常把themes文件夾導入以便樣式風格有效c.使用js或dom方式配置組件
<html> <head> <meta charset="utf-8" /> <title>EazyUI</title> <!-- 引入文件 --> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/jquery.easyui.min.js" ></script> <script type="text/javascript" src="locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="themes/icon.css"/> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/> </head> <body> <!-- 寫一個提示框 --> <div class="easyui-dialog" style="width: 200px;height: 200px;">你好！</div> </body> </html>
5.Messager消息框
提供不同樣式的消息框，包括警示（alert）、確認（confirm）、提示（prompt）、進展（progress）等等。所有的消息框都是異步的。用戶可以在與消息框交互後使用回調函數來完成一些動作
創建方式
a.$.messager.show({options});
在屏幕的右下角顯示一個消息窗口，options 參數是一個配置對象
<!-- 提示框 --> <script type="text/javascript"> $(function() { $.messager.show({ title:"提示框", msg:"你好！", timeout:2000, showType:"silde" }); }); </script>
b.$.messager.alert(title, msg, icon, fn);
警告提示框:
icon: 顯示的圖標圖片。可用值: error question info warning
<!-- 警告框 --> <script type="text/javascript"> $(function() { $.messager.alert("提示", "刪除成功", "info"); $.messager.alert("提示", "刪除失敗", "error"); }); </script>
c.$.messager.confirm(title, msg, fn);
顯示一個帶"確定"和"取消"按鈕的確認消息窗口
<!-- 確認對話框 --> <script type="text/javascript"> $(function() { $.messager.confirm("提示", "你真的要刪除嗎？", function(r) { if (r) { $.messager.alert("提示", "你選擇了刪除", "info"); } else{ $.messager.alert("提示", "你取消了刪除", "info"); } }); }); </script>d.$.messager.prompt(title, msg, fn);
顯示一個帶"確定"和"取消"按鈕的消息窗口，提示輸入一些文本
<!-- 確認對話框 --> <script type="text/javascript"> $(function() { $.messager.prompt("提示", "請輸入姓名", function(r) { $.messager.alert("提示", r + " 歡迎您！"); }); }); </script>6.DIalog對話框
對話框（dialog）是一個特殊類型的窗口
它在頂部有一個工具欄，在底部有一個按鈕欄
默認情況下，對話框（dialog）只有一個顯示在頭部右側的關閉工具
用戶可以配置對話框行爲來顯示其他工具
（比如：可摺疊 collapsible、可最小化 minimizable、可最大化 maximizable等等）
創建方式
a.通過標記從已有的 DOM 節點創建
代碼見第一個例子
b.使用 javascript 創建
<body> <div id="other" style="width:600px;height:400px;left:100px;top:400px"> <p>你好！</p> </div> </body> <!-- 使用js創建 --> <script type="text/javascript"> $(function() { $("#other").dialog({ title:"提示", iconCls:"icon-save", resizable:false }); }); </script>
7.練習
寫一個登錄頁面(比較用傳統的css寫法)
<body> <div id="loginWin" class="easyui-dialog" title="" style="width: 350px; height: 188px; padding: 5px;" minimizable="false" maximizable="false" resizable="false" collapsible="false" modal="true"> <form id="loginForm" method="get" action="#"> <div style="padding: 5px 0;"> <label for="login">用戶名：</label> <input type="text" name="login" style="width: 260px;" /> </div> <div style="padding: 5px 0;"> <label for="password">密 碼：</label> <input type="password" name="password" style="width: 260px;" /> </div> <div style="padding: 15px 0;"> <button type="submit" class="easyui-linkbutton" iconCls="icon-ok">登錄</button> <button type="reset" class="easyui-linkbutton" iconCls="icon-ok">重置</button> </div> </form> </div> </body>
8.Layout組件
佈局（layout）是有五個區域的容器
（北區 north、南區 south、東區 east、西區 west 和中區 center）
中間的區域面板是必需的，邊緣區域面板是可選的
每個邊緣區域面板可通過拖拽邊框調整尺寸
也可以通過點擊摺疊觸發器來摺疊面板
佈局（layout）可以嵌套，因此用戶可建立複雜的佈局
<body> <div class="easyui-layout" style="width: 600px;height: 400px;"> <div id="north" data-options="region:'north',title:'上部'" style="height: 100px;"></div> <div id="south" data-options="region:'south',title:'下部'" style="height: 100px;"></div> <div id="east" data-options="region:'east',title:'右部'" style="width: 100px;"></div> <div id="west" data-options="region:'west',title:'左部'" style="width: 100px;"></div> <div id="center" data-options="region:'center',title:'主體'" style="padding:5px;background:blue"></div> </div> </body>
a.常用設置
1)north區域：用來顯示網站的標題欄
2)south區域：用來顯示版權以及一些說明
3)west區域：用來顯示導航菜單
4)east區域：用來顯示一些推廣的項目
5)center區域：用來顯示主要的內容 必須的區域
b.創建方式
1)使用已有DOM節點創建佈局：代碼在上方
2)js方式創建
<body> <div id="mainLayout" style="width: 500px;height: 500px;"></div> </body> <script type="text/javascript"> $(function() { $("#mainLayout").layout(); $("#mainLayout").layout('add', { region:'north', title:"北", height:60 }); $("#mainLayout").layout('add', { region:'south', title:"南", height:60 }); $("#mainLayout").layout('add', { region:'west', title:"西", width:60 }); $("#mainLayout").layout('add', { region:'east', title:"東", width:60 }); $("#mainLayout").layout('add', { region:'center', title:"中" }); }); </script>9.Panel組件
a.Panel面板
是用來作爲其他內容的一個容器，允許您創建用於多種用途的自定義佈局
這是最基本構建其他組件(如layout, tabs, accordion, 等等) 的組件
還提供內置的可摺疊,可閉,允許最大化和允許最小化行爲和其他定製的行爲
面板可以很容易地嵌入到web頁面的任何位置
b.創建方式
通過標記創建面板：把 easyui-panel 的class 添加到DOM元素上
<body> <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div> </body>
10.Accordion組件
a.Accordion
摺疊面板（Accordion）包含一系列的面板（panel）
所有面板（panel）的頭部（header）都是可見的
但是一次僅僅顯示一個面板（panel）的 body 內容
當用戶點擊面板（panel）的頭部（header）時
該面板（panel）的 body 內容將可見
同時其他面板（panel）的 body 內容將隱藏不可見
通常嵌套在layout的west面板作爲菜單欄容器使用
b.html方式： 對應DOM元素添加名爲easyui-accordion的class屬性
<body> <div class="easyui-accordion" style="width:600px;height: 400px;"> <div data-options="title:'關於我們',iconCls:'icon-save'">第一個</div> <div data-options="title:'about us',iconCls:'icon-save'">第二個</div> </div> </body>
c.綜合應用
訂單管理系統
<body> <div class="easyui-layout" style="width: 600px;height: 400px;"> <div data-options="region:'north', title:'上部面板'">管理系統</div> <div data-options="region:'center'"> <div class="easyui-layout" style="width: 600px;height: 400px;"> <!-- 西邊 --> <div data-options="region:'west'" style="width: 200px;border-top: 0;"> <div id="accordionID" class="easyui-accordion" data-options="fit:true,border:false,selected:-1" style="width: 300px; height: 200px;"> <div title="訂單管理" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">訂單管理</div> <div title="路線管理" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">路線管理</div> <div title="人員管理" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">人員管理</div> <div title="車輛管理" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">車輛管理</div> <div title="幫助" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">幫助</div> </div> <!-- 中間 --> <div data-options="region:'center'" style="border-top: 0;"></div> </div> </div> </div> </div> </body>
11.Tabs組件
a.概述
Tabs 有多個可以動態地添加或移除的面板（panel）
您可以使用 Tabs 來在相同的頁面上顯示不同的實體
Tabs 一次僅僅顯示一個面板（panel）
每個面板（panel）都有標題、圖標和關閉按鈕
當 Tabs 被選中時，將顯示對應的面板（panel）的內容
通常用作layout佈局的center中內容顯示頁面容器
b.創建方式
html標籤方式： 對應DOM元素添加名爲easyui-tabs的class屬性
<body> <div class="easyui-tabs" style="width: 600px;height: 400px;"> <div data-options = "iconCls:'icon-save'"> <p>你好！</p> </div> <div data-options = "closable:true"> <p>大家好！</p> </div> </div> </body>c.動態添加Tabs組件
通過使用 jQuery EasyUI 可以很容易地添加 Tabs
只需要調用 'add' 方法即可
<body> <div class="easyui-layout" style="width: 600px;height: 400px;" data-options="iconCls:'icon-save',resizable:true"> <div data-options="region:'west',title:'菜單欄'" style="width: 200px;height: 250px;"> <a href="#" class="easyui-linkbutton" οnclick="addTab('baidu','https://www.baidu.com')">百度</a> <a href="#" class="easyui-linkbutton" οnclick="addTab('jquery','http://www.jquery.com')">jquery</a> <a href="#" class="easyui-linkbutton" οnclick="addTab('easyui','http://www.easyui.com')">easyui</a> </div> <div data-options="region:'center',title:'主題頁面'"> <div class="easyui-tabs" id="tabs" style="width: 400px;height: 250px;"> <div>默認</div> </div> </div> </div> </body> <script type="text/javascript"> function addTab(title, url) { // 指定title的tab是否存在 var flag = $("#tabs").tabs("exists", title); if (flag) { // 指定選項卡 $("#tabs").tabs("select", title); } else { // 放置內容的容器 var $frame = $("<iframe src=" + url + " style='width:100%;height:100%'></iframe>"); // 添加標題爲title的選項 $("#tabs").tabs("add", { title: title, content: $frame, closeable: true }); } } </script>12.Tree組件
a.Tree樹
通常以樹形結果顯示分層數據，適合做菜單使用
一個樹形菜單（Tree）可以從標記創建
easyui 樹形菜單（Tree）也可以定義在 <ul> 元素中
無序列表的 <ul> 元素提供一個基礎的樹（Tree）結構
每一個 <li> 元素將產生一個樹節點
子 <ul> 元素將產生一個父樹節點
b.給DOM元素添加名爲eaysui-tree的class,結合ul和li元素
<body> <ul class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder1</span> <ul> <li><span>File 11</span></li> <li><span>File 12</span></li> <li><span>File 13</span></li> </ul> </li> <li><span>File 2</span></li> <li><span>File 3</span></li> </ul> </li> <li><span>File 21</span></li> </ul> </body>
c.JS創建
<body> <ul id="tt"></ul> </body> <script type="text/javascript"> $(function() { // js初始化 $("#tt").tree({ data:[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{ "text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":"true" },{ "id":8, "text":"Sub Bookds", "state":"closed" }] }] },{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }] }] }); }); </script>
d.API說明
e.從後臺獲取
前臺
<body> <!-- 使用class屬性從DOM節點創建 --> <div class="easyui-dialog" style="width: 600px;height: 400px" data-options="iconCls:'icon-save',resizable:true"> <ul class="easyui-tree" data-options="url:'TreeServlet'"></ul> </div> </body>後臺
package org.xxxx.demo01; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/TreeServlet") public class TreeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 設置響應方式 response.setContentType("application/json;charset=utf-8"); // 創建一個json字符串 String str = "[{\"id\":\"1\",\"text\":\"Node1\",\"state\":\"closed\",\"children\":[{\"id\":\"11\",\"text\":\"Node11\"},{\"id\":\"12\",\"text\":\"Node12\"}]},{\"id\":\"2\",\"text\":\"Node2\",\"state\":\"open\"}]"; // 相應給前臺 response.getWriter().write(str); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }結果
如果把state設置爲closed(且沒有子節點)\，
則該節點會加載整個tree，形成死循環
13.Datagrid組件
a.Datagrid數據網絡
加載列表信息，可以起到分頁，查詢，即時刷新等效果，通常基於table實現
b.靜態數據
<body> <table class="easyui-datagrid"> <thead> <tr> <th style="width: 50px" field="name">姓名</th> <th style="width: 50px" field="sex">性別</th> </tr> </thead> <tr> <td>張三</td> <td>男</td> </tr> <tr> <td>李四</td> <td>女</td> </tr> </table> </body>c.後臺動態數據(添加網絡工具欄)
前臺
<body> <div id="tb"> <a href="#" class="easyui-linkbutton" ionCls="icon-add" plain="true" οnclick="javascript:alert('Add')">Add</a> <a href="#" class="easyui-linkbutton" ionCls="icon-add" plain="cut" οnclick="getInfo()">Cut</a> <a href="#" class="easyui-linkbutton" ionCls="icon-add" plain="save" οnclick="javascript:alert('Save')">Save</a> </div> <table id="tbs" class="easyui-datagrid" data-options="url:'InfoServlet',toolbar:'#tb'"> <thead> <tr> <th checkbox="true" field="id"></th> <th style="width: 50px" field="name">姓名</th> <th style="width: 50px" field="sex">性別</th> </tr> </thead> </table> </body> <script type="text/javascript"> function getInfo() { var rows = $("#tbs").datagrid("getSelections"); for ( var index in rows) { alert(rows[index].name); } } </script>後臺
package org.xxxx.demo01; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/InfoServlet") public class InfoServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=utf-8"); String jsonStr = "[{\"name\":\"張三\",\"sex\":\"male\"},{\"name\":\"王六\",\"sex\":\"female\"}]"; response.getWriter().write(jsonStr); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
14.標識符
a.添加複選框
對應的列添加checkbox="true"屬性就行
<th field="id" checkbox="true"></th>
b.獲取選擇的數據
<script type="text/javascript"> function getInfo() { var rows = $("#tbs").datagrid("getSelections"); for ( var index in rows) { alert(rows[index].name); } } </script>B.JQuery表單驗證
1.概述
在做網頁表單時時常，需要在客戶端對錶單填寫的數據進行驗證一番才能提交
用戶名必填 重複密碼輸入必須相同 電子郵件格式必須正確的
我們可以通過自己編寫JavasScript代碼來驗證
但是有時數據量過多時就會有些難度了，還有國際化等問題
2.validator表單驗證
基於jQuery的jquery.validate驗證框架幫我們解決了困難
我們可以通過它迅速驗證一些常見的輸入
並且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持
3.步驟
a.引用對應的js文件
jquery.js jquery.validate.js jquery.metadata.js
b.使用class屬性，將校驗規則寫到表單對應控件中
或者使用單獨的js文件定義
c.調用表單的validate()方法
4.練習
將校驗規則寫到控件中
<body> <form action="#" id="signupForm" method="get"> 用戶名：<input id="usernmae" name="username" required /> <br /> 電子郵件：<input id="email" name="email" type="email" required /> <br /> 密碼:<input id="password" name="password" type="password" required minlength="5" /><br /> 確認密碼:<input id="confirm_password" name="confirm_password" type="password" required minlength="5" equalTo="#password" /> <br /> <input class="submit" type="submit" value="Submit" /> </form> <script type="text/javascript"> $(function() { $('#signupForm').validate(); }); </script>5.規則
