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'});}});}

注：form表单的初始化：请参考api form : http://www.jeasyui.com/documentation/index.php#

未完待续。。。。

easyui框架搭建相关推荐

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建 ASP.NET MV ...
VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com
EasyUI框架是我本科时候后端开发的一个前端框架,用起来比较方便,缺点就是风格.颜色.主题不太行,但是现在济南的很所公司还用easyui开发呢!!本文主要在这里记录一下主要的配置情况,对程序员来说, ...
使用easyui快速搭建管理员主界面
使用easyui快速搭建管理员主界面 easyui 主页:index.jsp sidebarTree.json:左侧菜单内容 easyui easyui又叫Jquery EasyUI,是基于Jquer ...
java 详解搭建框架_maven 基本框架搭建详解
在平时的开发中还是在写blog时,在项目实例开始都会需要一遍一遍的介绍maven框架搭建,重复性的工作让我觉得烦恼,现在展现一下Java的核心思想"重复利用",将这个重复性的描述提 ...
gvgai框架搭建及controller编写
gvgai框架搭建及controller编写 gvgai框架搭建 controller编写 gvgai框架搭建 gvgai官网:http://www.gvgai.net/ 框架下载:http://ww ...
[转载]SSH框架搭建详细图文教程
什么是SSH? SSH对应 struts spring hibernatestruts 采用MVC模式,主要是作用于用户交互spring 采用IOC和AOP~作用比较抽象,是用于项目的松耦合hiber ...
spring mvc + mybatis 框架搭建 ( idea + gradle)
spring mvc + mybatis 框架搭建 idea + gradle 刚刚入门,只是个人见解,如有错误或者问题欢迎指出指正. 邮箱: [ wgh0807@qq.com ] 文章引用: [ap ...
Angular开发实践（一）：环境准备及框架搭建
引言在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架.前后端分离.前端工程化.SPA优化等等.因此想通过Angular开发实践这系 ...
SSH框架搭建问题总结
1.eclipse中tomcat配置是否正确?能否在网页中访问的到? 如何在eclipse中配置tomcat就不说了,我们看下问题,在网页上访问tomcat的地址,为什么出现404错误呢? 解决办法: ...
React-Native 之 GD （一）目录结构与第三方框架使用与主题框架搭建
1.APP效果图 2.工程环境配置 IOS: 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹. 这时候我们可以看到所有图片资源 ...

easyui框架搭建

easyui框架搭建

easyui框架搭建相关推荐

最新文章

热门文章