EasyUI快速入门

目录

    • EasyUI简介
    • EasyUI的优缺点
    • 快速应用EasyUI
    • EasyUI布局

EasyUI简介

我们先看看官网的介绍:

EasyUI快速入门_第1张图片

EasyUI的优缺点

EasyUI快速入门_第2张图片

  1. 首先功能丰富是真的,因为EasyUI组件比较多,而且EasyuUI 的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展
  2. 对于想了解学习一款前端框架,它的一个文档完整性是比较重要的,EasyUI的文档完整性比较好,资料官网也比较齐,对于个人想拓展学习一下还是可以入手的
  3. 至于缺点,个人认为比较差的一点的就是界面美观了,相对于boostrap、layui这些界面美观的框架来说,还是差上不少的

快速应用EasyUI

EasyUI中文官网
点击上面的链接进入官网,点击EasyUI下载(目前最新版本是1.7),显示如下:
EasyUI快速入门_第3张图片

EasyUI快速入门_第4张图片下载解压文件后如下:
EasyUI快速入门_第5张图片

  1. demodemo-mobile为示例文件夹,demo都是html格式的,可以直接访问
  2. demo-mobile:是移动端的演示文件
  3. plugins:包含了全部组件的js处理程序
  4. src:部分组件的js开源程序
  5. themes:包含了各种主题资源文件,图标库、样式库等等
  6. txt:文档说明
  7. jquery.min.jsjquery库:如果要使用jquery easyui,就必须先加载jquery
  8. jquery.easyui.min.jseasyui的核心库文件
  9. locale:设置语言环境
  10. jQuery.easyui.mobile.js:移动端项目应用时的核心库文件
  11. 还有个js库比较少用,就不介绍了

EasyUI布局

页面引入cssjs
css文件在themes文件中,如下themes文件内容
EasyUI快速入门_第6张图片
应用到项目时,整个themes文件复制到路径下就行,themes文件夹下有css样式和主题颜色,要用在页面就引入哪个,比如我这里引入的是gary主题颜色,js文件引入的是jQuery库和jquery.easyui的库

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/themes/gray/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.easyui.min.js"></script>

效果图:
EasyUI快速入门_第7张图片
页面源码:

<%@ 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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/themes/gray/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.easyui.min.js"></script>
<title>主界面</title>
</head>
<body>
<body class="easyui-layout">
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</body>
</html>

项目结构图:
EasyUI快速入门_第8张图片
简单的EasyUI页面布局样式就是这样了,后续会更新更多的EasyUI框架知识…

你可能感兴趣的:(EasyUI快速入门)