11级_Java_曹建波 04.07 jQuery easyUI 后台界面搭建案例
核心代码
Index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/styles/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/styles/easyui/themes/icon.css"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/styles/manager/init.css"><script type="text/javascript"src="${pageContext.request.contextPath }/scripts/jquery-1.8.0.min.js"></script><script type="text/javascript"src="${pageContext.request.contextPath }/scripts/jquery.easyui.min.js"></script><script type="text/javascript"src="${pageContext.request.contextPath }/scripts/manager/init.js"></script></head><body><div id="box" class="easyui-layout"><!-- north开始 --><div data-options="region:'north',title:'North Title',split:true"style="height:100px;"></div><!-- north结束 --><%--<divdata-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>--%><!--west开始 --><div data-options="region:'west',title:'导航菜单',split:true"style="width:200px;"><div id="nav" class="easyui-accordion"data-options="fit:true,border:false"style="padding-right: 5px; padding-left: 5px;"><div title="管理员管理" data-options="iconCls:'icon-save'"><ul><li><ahref="${pageContext.request.contextPath }/backstage/admin/admin_list.jsp">管理员列表</a></li></ul></div><div title="会员管理"><ul><li><a href="#">会员列表</a></li></ul></div><div title="商品类别管理" data-options="iconCls:'icon-reload'"style="padding:10px;"><ul><li><a href="${pageContext.request.contextPath }/backstage/goodstype_list.jsp">商品类别列表</a></li></ul></div><div title="商品管理" data-options="iconCls:'icon-reload'"style="padding:10px;"><ul><li><a href="#">商品列表</a></li></ul></div></div></div><!-- west结束 --><!-- center开始 --><div data-options="region:'center'" style=""><div id="tt" class="easyui-tabs" data-options="fit:true"><div title="后台操作的界面" style="padding:20px;">后台操作界面的说明</div></div></div><!-- center结束 --><!-- south开始 --><div data-options="region:'south',split:true"style="height:25px; padding: 5px; background: #D2E0F2;"><div align="center">版权归河北软件职业技术学院 @河软CSDN乐知学院所有2013-2020</div></div><!-- south结束 --></div></body></html>
Init.js
$(document).ready(function() { //获取所有的a元素 var $as = $("li>a"); //获取id=tabs的元素 var $tt = $("#tt"); //注册点击事件 $as.bind("click", function() { var text = $(this).text(); var url = this.href; //根据标题看这个面板是否存在 if ($tt.tabs("exists", text)) { //如果存在 变成被选中的状态 $tt.tabs("select", text); } else { //如果不存在则添加 $tt.tabs('add', { title : text, closable : true, content : createFrame(url), //创建面板内容 tools : [{ iconCls : 'icon-mini-refresh', handler : function() { alert('refresh'); } }] }); } return false; });});//创建面板function createFrame(url) { var src = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; return src;}