目录
1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中
一、什么是EasuUI？
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
二、easyui能带给我们什么好处？
- easyui是个完美支持HTML5网页的完整框架
- easyui节省网页开发的时间和规模
- easyui很简单但功能强大
三、easyui如何使用？
EasyUI - helps you build your web pages easily 英文网址
Download EasyUI Package - jQuery,Angular,React,Vue 官网
1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中
文件介绍
- demo文件夹
- EasyUI官方提供的每个组件的使用示例效果代码。
- locale文件夹:组件中显示的数据语言的js文件
- plugins文件夹:是EasyUI提供的组件对应的js文件
- src文件夹:源码文件夹
- themes文件夹：EasyUI官方提供的整套的样式
2️⃣. 引入必要的js和css样式文件
- 引入JQuery（jquery.min.js）
- 引入EasyUI（jquery.easyui.min.js）
- 引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
- 引入EasyUI的样式文件（/themes/default/easyui.css）
- 引入EasyUI的图标样式文件（/themes/icon.css）
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 3️⃣.easyui文档网站
jQuery EasyUI中文文档 - EasyUI在线开发文档-EasyUI中文站
找到layout布局 创建布局
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body> 布局搭建和菜单搭建
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'网站信息' ,collapsible:false"
style="height:100px;"></div>
<div data-options="region:'south',title:'赞助链接',collapsible:false"
style="height:100px;"></div>
<div data-options="region:'west',title:'菜单',split:true"
style="width:20%;">
<ul id="asideMenu"></ul>
</div>
<div data-options="region:'center',title:'主体部分'"
style="padding:5px;background:#eee;"></div>
<script>
$('#asideMenu').tree({
url : 'tree-data.json', //远程数据的地址
method : "POST",//访问的方式
lines : true,//显示虚线
onClick(node){
//取到节点的自定义属性 判断自定义属性中的pid
if(node.attributes.pid){
console.log("小菜单")
}else{
console.log("大菜单")
}
}
});
</script>
</body>
</html>tree-data.json
[
{
"id":1,
"text":"商品管理",
"state":"closed",
"attributes":{
"pid":0
},
"children":[
{
"id":2,
"text":"商品增加01",
"attributes":{
"pid":1
}
},{
"id":3,
"text":"商品增加02",
"attributes":{
"pid":1
}
}
]
},{
"id":10,
"text":"类别管理",
"state":"closed",
"attributes":{
"pid":0
},
"children":[
{
"id":12,
"text":"类别增加01",
"state":"closed",
"attributes":{
"pid":10
},
"children":[
{
"id":18,
"text":"jsakdh",
"attributes":{
"pid":12
}
}
]
},{
"id":13,
"text":"类别增加02",
"attributes":{
"pid":10
}
}
]
}
]
2875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
