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:
<!--Ctrl+Shift+R 找全路径 -->
<%-- ${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>
效果图: