85-002-15 利用EasyUI设计一个后台页面的菜单显示

来源：互联网发布：js 跳转url 编辑：程序博客网时间：2024/06/05 05:13

图文版：http://note.youdao.com/yws/public/redirect/share?id=abc20790e48da5130e227d9390e4df92&type=false
资源文件下载 https://yunpan.cn/OcRaTMHR3NWIIf 访问密码 4b2c

15.1 首先编辑EasyUI后台首页

aindex.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<%@ include file="/public/head.jspf" %>

#menu{

width: 200px ;

}

#menu ul{

padding: 0px ;

margin:0px ;

list-style: none;

}

#menu ul li{

border-bottom: 1px solid white ;

}

#menu ul li a{

display: block;

text-decoration:none;

padding: 5px ;

color:white;

background-color: #00a6ac ;

}

#menu ul li a:hover{

background-color: #008792;

}

</style>

$(function(){

//对于a元素点击事件只对含有属性title的a元素点击有效

$("a[title]").click(function(){

var text = $(this).text() ; //获取元素a中的text文本

var href= $(this).attr("title") ;

//判断指定内容（比如‘类别管理’）的tabs标签是否存在

if($("#tt").tabs("exists",text)){

/* 如果存在指定tabs的对象则切换到这个tabs上 */

$("#tt").tabs("select",text) ;

}else{

/* 否则就创建一个指定标题的tabs标签*/

$("#tt").tabs("add",{

title:text,

//也可以通过URL来定义一个页面显示在tabs或panel组件内容中

//与此同时需要注意的是其填充加载的内容仅只包含body节点以内的内容，其他节点无效比如<head>节点

//href:"send_category_query.action"

//通过下面的形式却可以加载整个页面的内容

content:'<iframe src="${shop}/send_category_query.action" width="100%" height="100%" frameborder="0"/>',

closable:true

}) ;

}

});

</script>

</head>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

此处显示系统配置环境信息

</div>

</body>

</html>

15.2 然后定义被加载的页面

query.jsp

<html>

<head>

<%@ include file="/public/head.jspf" %>

页面jquery.jsp:head内容

</head>

<body>

页面jquery.jsp:body内容

</body>

</html>

两个页面分别所属的位置

0 0