EasyUI入门

最新推荐文章于 2021-10-22 08:28:19 发布

文渊.

最新推荐文章于 2021-10-22 08:28:19 发布

阅读量63

点赞数

分类专栏：笔记文章标签： easyui

本文链接：https://blog.csdn.net/m0_52788922/article/details/120463370

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

简介：

为什么用：快速开发

什么时候用：html4+jQuery的快速开发的前端框架

用来干什么：后端开发管理界面

常用控件：
.
layout（布局控件）、tree（树型菜单）、tabs（选项卡）、datagrid（表格控件）
.
form（表单控件）、messager（消息框）、combobox（下拉列表）

使用方法：

1，EasyUI官网（可在官网中进行下载）

JQuery EasyUI中文网

2，今天讲解的控件是layout（布局控件）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

使用：
.
1，导入EasyUI的资源
.
2，查阅API文档使用EasyUI的组件完成页面开发

1，导入相关依赖和需要的文件夹【css(主要放样式)、images（主要放图片）、js（放样式）】

在这里插入图片描述
2，在jsp界面导入相对路径（最好放入绝对路径）
选中蓝色部分（按Ctrl+shift+r）可以快速找到相应文件并复制绝对路径

3，写入控件layout（代码展示）

<%@ 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>
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/Lgs_EasyUi_01/WebContent/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/Lgs_EasyUi_01/WebContent/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${ pageContext.request.contextPath }/Lgs_EasyUi_01/WebContent/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1//Lgs_EasyUi_01/WebContent/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'北边',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'南边',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'东边',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'西边',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'中部'" style="padding:5px;background:#eee;"></div>   
</body>  
</html>

运行结果：
在这里插入图片描述
到这里就结束了，有不对或补充的地方欢迎大家评论，谢谢！

文渊.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI入门

简介：为什么用：快速开发什么时候用：html4+jQuery的快速开发的前端框架用来干什么：后端开发管理界面常用控件：.layout（布局控件）、tree（树型菜单）、tabs（选项卡）、datagrid（表格控件）.form（表单控件）、messager（消息框）、combobox（下拉列表）使用方法：1，EasyUI官网（可在官网中进行下载）JQuery EasyUI中文网2，今天讲解的控件是layout（布局控件）布局容器有5个区域：北、南、东、西和中间。中间区域
复制链接

扫一扫