Hilo Everybody wellcome to my channel!
今天Lion带大家来学习前端开发的一个领域——EasyUi02
今日份思维导图:
EasyUi网址:EasyUI - helps you build your web pages easily
今天我们用EasyUi实现一下效果:EasyUi不适于前台开发更适用于后台的数据展示!因为其界面的美观度来考虑更适合后台界面!
代码界面:
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入公共页面 -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$('#myTree').tree({
url:ctx+'/data/tree_data1.json' ,//请求地址 Ajax
animate:true ,//折叠或者展开的时候是否有动画效果
onDblClick: function(node){
//alert(node.text); // 在用户双击的时候提示
//拿到后代节点的集合
var cs = $('#myTree').tree('getChildren',node.target);
//alert(cs);
if(cs.length==0){//没有后代节点
var f = $('#myTab').tabs('exists',node.text);
//判断是否存在
if(!f){//说明不存在
//新打开一个选项卡(tab页)
$('#myTab').tabs('add',{
title:node.text,//标题
content:node.text, //内容
closable:true, //是否可关闭
/* tools:[{
iconCls:'icon-ok',
handler:function(){
alert('想干啥就干啥');
}
}]*/
iconCls:node.iconCls
});
}
else{//说明存在 让其对应选中
$('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:85px;text-align:center;">
<h1>后台书籍管理</h1>
</div>
<div data-options="region:'south',split:true" style="height:60px;text-align:center;">
<b>©玉渊工作室所有,未经允许不可擅自使用</b>
</div>
<div data-options="region:'west',title:'功能导航',split:false" style="width:200px;">
<!--左侧 tree控件 -->
<ul id="myTree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'" style="padding:5px;background:#fff;">
<!--中间的tab控件 -->
<div id="myTab" data-options="pill:true" class="easyui-tabs" style="width:100%;height:100%;">
<div data-options="iconCls:'icon-application-home'" title="首页" style="padding:20px;display:none;">
<img src="images/1.jpeg" width="100%" height="100%">
</div>
</div>
</div>
</body>
</html>
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
//System.out.print(path); /easyui01
request.setAttribute("ctx",path);//${ctx}
//String a = (String) request.getAttribute("ctx");
//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
var ctx = '${ctx}';
</script>
<!--引入easyui的css -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-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-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
公共页面的代码:
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
//System.out.print(path); /easyui01
request.setAttribute("ctx",path);//${ctx}
//String a = (String) request.getAttribute("ctx");
//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
var ctx = '${ctx}';
</script>
<!--引入easyui的css -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-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-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
//System.out.print(path); /easyui01
request.setAttribute("ctx",path);//${ctx}
//String a = (String) request.getAttribute("ctx");
//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
var ctx = '${ctx}';
</script>
<!--引入easyui的css -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-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-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">