入门
1、环境安装:下载 解压 5个(2个CSS[easyui.css icon.css] 3个JS[jQuery.js easyui.js CN.js])
2、公共页面 head.jsp ctx取绝对路径 防止404
3、控件的使用:layout
4、几种方式去学控件:1.Demo 2.API离线文档 属性 方法 事件
5、回顾json格式:
对象:{键:值,键:值}
数组:[]
对象数组:[{},{}]
需要引入的方法(很重要)
<!--引入easyui的css -->
<like rel="stylesheet" type="text/css" href="${ctx }js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库--->
<like rel="stylesheet" type="text/css" href="${ctx }js/hquery-easyui-1.5.5.2/themes/icon.css"/>
<!--引入jquery的类库 -->
<script type="text/javascript" src="${ctx }js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--引入easyui的类库 -->
<script type="text/javascript" src="${ctx }js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!--引入easyui的中文包 支持中文 -->
<script type="text/javascript" src="${ctx }js/jquery-easyui-1.5.5.2/locale/easyui-lang-zn-CN.js"></script>
主要应用
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(表单组件)