easyui基本布局

最新推荐文章于 2024-04-08 13:00:00 发布

zt--

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量1.6k

点赞数 2

文章标签： easyui

本文链接：https://blog.csdn.net/m0_67514201/article/details/124052823

版权

http://www.jeasyui.net/（中文网）

http://www.jeasyui.com/（英文版）

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

常见UI：
Layui，Bootstrap，element ui,ant design,iview

vue 前后端分离

1.什么是easyui？

easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处？

1）easyui是个完美支持HTML5网页的完整框架
2）easyui节省网页开发的时间和规模
3）easyui很简单但功能强大

3.easyui如何使用？

pageContext.request.contextPath

3.1 引入必要的js和css样式文件
1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的样式文件（/themes/default/easyui.css）
5）引入EasyUI的图标样式文件（/themes/icon.css）

3.2 路径问题
3.2.1 相对路径/绝对路径
3.2.2 base标签

3.3 页面缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

4.组件

分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本章节主要讲述以下组件的使用：
1）layout（布局组件）
2）accordion（分类组件）
3）tree（树形组件）
4）tabs（选项卡组件）
5）datagrid和pagination（表格和分页组件）
6）dialog和messager（窗口组件）
7）form（表单组件）

5,引入 easyui 相关文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- base标签的href属性里面的内容会自动添加在head标签里面的引入的路径前面 -->
<base href="${pageContext.request.contextPath }/static/" />

<!-- 引入easyui相关文件 -->
<!-- 引入jquery库 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入easyui的中文国际化js -->
<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入css样式文件 -->
<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"/>

<!-- 动态获取项目名，并保存到request作用域 -->
<%
	request.setAttribute("ctx", request.getContextPath());
%>

<!-- 从request作用域里面获取项目名，并赋给一个js变量 -->
<script type="text/javascript">
	var ctx = '${ctx}';
</script>

6,easyui框架的使用

用 easyui 插件完成的界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主界面</title>
<!-- 通过include指令引入公共部分页面head.jsp -->
<%@ include file="static/common/head.jsp" %>
</head>
<!-- layout（布局） -->
<body class="easyui-layout"> 
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'west',title:'菜单管理',split:true" style="width:100px;">
    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    	<!-- accordion（分类）    -->
   		<div title="Title1" data-options="iconCls:'icon-reload'" style="overflow:auto;padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>   
    	</div> 
    	<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>    
    	</div>   
    	<div title="Title3" data-options="iconCls:'icon-reload'" style="padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>   
    	</div>   
		</div>  
    </div>   
    <div data-options="region:'center',title:'内容区域'" style="padding:5px;background:#eee;">
    	<!-- tabs（选项卡） -->
    	<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   
    		<div title="Tab1" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        		tab1    
    		</div>   
    		<div title="Tab2" data-options="iconCls:'icon-reload',closable:true" style="overflow:auto;padding:20px;display:none;">   
        		tab2    
    		</div>   
    		<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        		tab3    
    		</div>   
		</div>  
    </div>   
</body>
</html>

zt--

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
easyui基本布局

目录1.什么是easyui？2.easyui能带给我们什么好处？3.easyui如何使用？4.组件5,引入 easyui 相关文件6,easyui框架的使用http://www.jeasyui.net/（中文网）http://www.jeasyui.com/（英文版）EasyUI官方下载地址：http://www.jeasyui.com/download/index.php常见UI： Layui，Bootstrap，element ui,ant de...
复制链接

扫一扫