11级_Java_曹建波 04.07 jQuery easyUI 后台界面搭建案例

最新推荐文章于 2021-09-15 00:29:11 发布

iteye_8029

最新推荐文章于 2021-09-15 00:29:11 发布

阅读量112

点赞数

文章标签： java javascript ViewUI

核心代码

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结束 -->


		<%--<div
			data-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><a
							href="${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;
}

iteye_8029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11级_Java_曹建波 04.07 jQuery easyUI 后台界面搭建案例

核心代码Index.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + req...
复制链接

扫一扫