今天主要教大家使用EasyUI去制作网页页面,其实EasyUI在网页中适合用于后端,也就是管理员页面使用,因为相对来说EasyUI并不是那么好看。
EasyUI 基本使用
- 去搜索EasyUI官网提供了代码,根据需要将代码复制过去
- 在使用EasyUI需要将包导进去
- 包导进去后在jsp文件中,还需要导入该四条语句
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">
EasyUI代码实操
使用EasyUI实现菜单功能
index.jsp代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/jquery-easyui-1.5.5.2/themes/icon.css">
<title>首页</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'网站导航栏',split:false" style="height:100px;"></div>
<div data-options="region:'south',title:'友情链接',split:false" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单'" style="width:300px;">
<ul id="tt"></ul>
</div> `
<div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>
</body>
<script>
//tree构建方法
$("#tt").tree({
url:"sidebarTree.jsp",//远程数据的地址
method:"POST",//访问方式
lines:true,//显示虚线
onClick: function(node){
//node.text拿到的是每一个节点的名字
//node.attributes.pid拿到attributes下的pid的值
if(node.attributes.pid){
console.log("你是小彩蛋")
}else{
//0本身就是false
console.log("你是大菜单");
}
}
})
</script>
</html>
sidebarTree.jsp代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[{
"id":1,
"text":"商品管理",
"iconCls":"icon-save",
"attributes":{
"pid":0
},
"children":[{
"id":2,
"text":"商品增加"
},
{
"id":3,
"text":"商品修改",
"state":"closed",
"attributes":{
"url":"/demo/book/abc",
"price":100,
"pid":1
},
"children":[{
"id":4,
"text":"食品",
"attributes":{
"pid":1
}
},{
"id":5,
"text":"电器",
"attributes":{
"pid":1
}
}
]
}]
},{
"id":10,
"text":"类别管理",
"state":"closed",
"attributes":{
"pid":0
},
"children":[{
"id":11,
"text":"类别增加",
"attributes":{
"pid":10
}
},{
"id":12,
"text":"类别修改",
"attributes":{
"pid":10
}
}]
}]
今天的学习就到这里啦!!!