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>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><pre name="code" class="html"> text:'注册',
iconCls:'icon-edit',
handler:function(){
$('#index_regDialog').dialog('open');
} <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'
});
}
});
}
未完待续。。。。
1621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
