Easyui__01_入门

最新推荐文章于 2024-05-20 00:29:16 发布

阿立不油腻

最新推荐文章于 2024-05-20 00:29:16 发布

阅读量155

点赞数 2

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

本文链接：https://blog.csdn.net/qq_58530605/article/details/120213671

版权

easyui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ui框架发展史
   easyui=jquery+html4 :(用来做后台的管理界面)在2016年前，用的很多，主要是可以白嫖

   bootstrap=jquery+html5:响应式布局，可以适用手机、电脑两端，白嫖不到精髓，Api文档还不全

   layui: 出世晚、可以白嫖、比Easyui好看，有bug,文档不全

   使用需从成本，技术功底及社区活跃度

需下载：

Api文档是说明书 :

一、简介

why:学Easyui是为了前后端的快速开发

what：Easyui是一个html4+JQuery的快速开发的前端框架

where：Easyui一般适用在后端开发的管理系统

常用控件 :layout、tree、tabs、datagrid、form、messager、combobox

layout布局：

tree(动态加载)：

tabs：

datagrid（用于数据展示）：

form：

messager：

combobox：

二、Easyui使用：

创建一个web项目:

在webcontent中新建一个新的Folder文件夹，名字取为static，其中static中在新建三个Folder 文件夹,分别为css(主要放样式)、images（放图片）,js（放样式）。(用于提前适用企业规范化)

Eclipse:

<%-- ${pageContext.request.contextPath} 取项目名--%>

代码：

<%@ 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 }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${ pageContext.request.contextPath }/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/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:'联系方式：10086',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'简介',title:'East',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>

效果图：

阿立不油腻

关注

2
点赞
踩
0

收藏

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

ui框架发展史 easyui=jquery+html4 :(用来做后台的管理界面)在2016年前，用的很多，主要是可以白嫖 bootstrap=jquery+html5:响应式布局，可以适用手机、电脑两端，白嫖不到精髓，Api文档还不全 layui: 出世晚、可以白嫖、比Easyui好看，有bug,文档不全使用需从成本，技术功底及社区活跃度需下载：Api文档是说明书 :一、简介...
复制链接

扫一扫