一、介绍

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

二、需要的工具

1、eclipse

2、EasyUI插件包

3、Tomcat

三、搭建框架

1、创建一个web项目

2、导入EasyUI必要的css样式和js文件

3、在jsp页面中引入css样式和js文件

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

4、关于文件路径问题

4.1、我们可以使用一个公用的head.jsp页面来统一引入需要的资源，其他页面使用include进行引入，便于管理。

4.2、在webapp下创建common目录， head.jsp

4.3、将引入样式和文件的代码移到head.jsp中

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//拿到绝对路径，例如：demo/  request.setAttribute("ctx", request.getContextPath());
%><script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/js/jquery-easyui-1.5.5.2/themes/icon.css"/><script type="text/javascript">//将拿到的路径赋值给js变量var ctx = "${ctx}";
</script>

4.4、使用包含导入到其他的jsp页面中

<%@ include file="common/head.jsp" %>

四、layout布局

<body class="easyui-layout">   <div data-options="region:'north',title:'芜湖',split:true" style="height:100px;"></div>   <div data-options="region:'west',title:'功能导航',split:true" style="width:100px;"></div>   <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div><div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">Copyright@XXXX有限责任公司</div>
</body>

五、总结

其实EasyUI很简单，不需要记什么代码，只需要留下印象，要用的时候直接去查API文档就行了

EasyUI(搭建框架layout布局)相关推荐

记录6年时间3套easyui前端框架主题皮肤美化的设计历程
沉寂了许久,是该发点东西了,要不然2023年都要过去一半了 ! 第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和c ...
【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...
EasyUI中layout布局的简单使用
场景效果布局选项(Layout Options) 名称类型描述默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签 ...
php layout布局文件,layout（布局） - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
EasyUI之Layout布局
视频课:https://edu.csdn.net/course/play/7621 Layout布局,是按照上北,下南,左西右东,center居中的布局方式.主要属性:region设置布局的方向,st ...
使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
Ext JS4序列教程之一：Layout布局
1.序言 EXT JS4序列教程主要讲解WEB开发中一些常用的组件,例如Tree,Grid,Combobox,form等,EXT JS4的出现为广大程序员带来了福音,我们可以用较少的代码,实现很炫丽的 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
android layout 界面开发,步步为营_Android开发课[14]_用户界面之Layout(布局)
主题:用户界面之Layout(布局) -在Android开发中我们有传说中的5大布局,它们的结合使用,画出了APP界面的条条框框. Android中常用的5大布局: 线性布局(LinearLayout ...
ssm radis mysql_从零开始搭建框架SSM+Redis+Mysql（一）之摘要
从零开始搭建框架SSM+Redis+Mysql(一)之摘要本文章为本人实际的操作后的回忆笔记,如果有步骤错漏,希望来信307793969@qq.com或者评论指出. 本文章只体现过程,仅体现操作流程 ...

EasyUI(搭建框架layout布局)