easyui框架搭建
生活随笔
收集整理的這篇文章主要介紹了
easyui框架搭建
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
easyui框架搭建
1.官網下載easyui：http://www.jeasyui.com
2.將easyui框架復制到您的項目中。
3.建立初始頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%> <!DOCTYPE html > <html> <title>首頁</title> <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script> <script type="text/javascript" src="jslib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link> <body class="easyui-layout"><div data-options="region:'north',title:'歡迎訪問該系統',split:true" style="height: 100px;"></div><div data-options="region:'south',title:'South',split:true" style="height: 10px;"></div><div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div><div data-options="region:'west',title:'West',split:true" style="width: 100px;"></div><div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div> </body> </html>3.1去除底部的折疊效果（去掉title標題即可），以及左側的折疊效果并且帶標題：修改代碼如下：
split:true --》表示可以拖動邊框。 <pre name="code" class="html">border:false --》去除title的邊框。 <pre name="code" class="html">fit:true --》自適應panel的大小。 <body class="easyui-layout"><div data-options="region:'north',title:'歡迎訪問該系統',split:true" style="height: 100px;"></div><div data-options="region:'south',split:true" style="height: 25px;"></div><div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div><div data-options="region:'west',split:true" style="width: 100px;"><div class="easyui-panel" data-options="title:'luckyssmm系統',border:false, fit:true"></div></div><div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div> </body>3.2添加登錄框： <div class="easyui-dialog" data-options="title:'登錄'"><table><tr><th>登錄名</th><td><input></td></tr><tr><th>密碼</th><td><input></td></tr></table></div>
3.3添加登錄按鈕等：通過查看dialog的api添加如下代碼：http://www.jeasyui.com/documentation/index.php# buttons --》 添加所需按鈕。 <pre name="code" class="html">modal:true --》 模式化窗口，即只可操作當前窗口。 <div class="easyui-dialog" data-options="title:'登錄',modal:true , buttons:[{text:'注冊',iconCls:'icon-edit',handler:function(){alert('edit')}},{text:'登錄',iconCls:'icon-help',handler:function(){alert('help')}}]"><table><tr><th>登錄名</th><td><input></td></tr><tr><th>密碼</th><td><input></td></tr></table></div>3.4 通過查看windows的api實現，取消不顯示關閉按鈕。 closable:false --》設置不顯示關閉按鈕。
3.5添加注冊按鈕的彈出框并設置其為隱藏狀態： <pre name="code" class="html">closed:true --》 設置當前彈出框為隱藏狀態。windows的api查看。 <pre name="code" class="html"><div id="index_regDialog" class="easyui-dialog" data-options="title:'登錄',modal:true, closed:true, buttons:[{text:'注冊',iconCls:'icon-edit',handler:function(){alert('edit')}}]"><table><tr><th>登錄名</th><td><input></td></tr><tr><th>密碼</th><td><input></td></tr><tr><th>重復密碼</th><td><input></td></tr></table></div> 3.6添加登錄框的注冊按鈕的事件： <pre name="code" class="html"> text:'注冊',iconCls:'icon-edit',handler:function(){$('#index_regDialog').dialog('open');} 3.7 另一種初始化dialog的寫法，供參考(1.31版本可以實現dialog自適應功能，否則在div中初始化，dialog不會自適應。)： <div id="index_regDialog_2"><table><tr><th>登錄名</th><td><input></td></tr><tr><th>密碼</th><td><input></td></tr><tr><th>重復密碼</th><td><input></td></tr></table></div>
<script type="text/javascript">$(function() {$('#index_regDialog_2').dialog({title : '登錄2',modal : true, // ?? ??? ??? ?closed : true,buttons : [ {text : '注冊',iconCls : 'icon-edit',handler : function() {alert('edit')}}]}).dialog('close');}); </script>
3.8 添加注冊校驗功能。。
3.8.1 注冊窗口先添加form表單：
<form id="index_regForm" method="post"><table><tr><th>登錄名</th><td><input></td></tr><tr><th>密碼</th><td><input></td></tr><tr><th>重復密碼</th><td><input></td></tr></table></form>3.8.2查看api添加，初始化form表單：http://www.jeasyui.com/documentation/index.php#，(如果使用ValidateBox，如下的onSubmit方法先要去掉。。。) //初始化form$('#index_regForm').form({url:'',onSubmit: function(){// do some check// return false to prevent submit;},success:function(data){alert(data)}});
3.8.3 添加注冊按鈕的表單提交事件：。。。。 $('#index_regForm').submit();
3.8.4 添加easyui的驗證屬性，api的ValidateBox屬性： ?? ???? <form id="index_regForm" method="post"><table><tr><th>登錄名</th><td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'*登錄名稱必填'"></td></tr><tr><th>密碼</th><td><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"></td></tr><tr><th>重復密碼</th><!--td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="eqPwd['#pwd']"></td--><td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true, validType:'eqPwd[\'#pwd\']'"></td></tr></table></form>
3.8.5 引入孫宇擴展的easyui插件，請自行搜索下載吧。
3.8.6 form表單第二種初始化方法，寫到dialog的buttons組件中。。。
<div id="index_regDialog" class="easyui-dialog" data-options="title:'登錄',modal:true, closed:true, buttons:[{text:'注冊',iconCls:'icon-edit',handler:function(){//初始化form$('#index_regForm').form({url : '',success : function(data) {alert(data)}});$('#index_regForm').submit();}}]">3.8.7 form 第三種初始化方法，包含submit事件：
<div id="index_regDialog" class="easyui-dialog" data-options="title:'登錄',modal:true, closed:true, buttons:[{text:'注冊',iconCls:'icon-edit',handler:function(){//初始化form$('#index_regForm').form('submit', {url : '',success : function(data) {alert(data)}});}}]">
3.8.8 或者用如下方式初始化form表單：
<div id="index_regDialog" class="easyui-dialog" data-options="title:'登錄',modal:true, closed:true, buttons:[{text:'注冊',iconCls:'icon-edit',handler:function(){reg();}}]"></pre><pre name="code" class="java"> function reg() {//初始化form$('#index_regForm').form('submit', {url : '${pageContext.request.contextPath}/userController/reg.do',// dataType : 'json',// contentType : 'application/json;charset=UTF-8',success : function(data) {var $data = $.parseJSON(data);console.info($data.success);console.info($data.message);if ($data.success) {$('#index_regDialog').dialog('close');}$.messager.show({title : '提示',msg : $data.message,timeout : 5000,showType : 'slide'});}});}
未完待續。。。。
總結
以上是生活随笔為你收集整理的easyui框架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI框架介绍
- 下一篇： JQuery EasyUI框架