原文地址:https://blog.csdn.net/laozhuxiao/article/details/54342121javascript
簡介:
sitemesh應用Decorator模式,用filter截取request和response,把頁面組件head,content,banner結合爲一個完整的視圖。一般咱們都是用include標籤在每一個jsp頁面中來不斷的包含各類header, stylesheet, scripts and footer,如今,在sitemesh的幫助下,咱們能夠開心的刪掉他們了
1、在WEB-INF/web.xml中copy如下filter的定義:
<filter>
<filter-name>sitemeshFilter</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>sitemeshFilter</filter-name>
<url-pattern>/a/*</url-pattern>
</filter-mapping>
2、在WEB-INF下,創建一個decorators.xml配置文件,以下:
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/static">
<!-- 默認裝飾頁面, 在須要裝飾的頁面增長<meta name="decorator" content="default"/> -->
<decorator name="blank" page="layouts/blank.jsp" />
<decorator name="default" page="layouts/default.jsp" />
</decorators>
其中
blank.jsp頁面代碼以下:
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/static/include/taglib.jsp"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
<title><sitemesh:title/></title><!-- - Powered By JeeSite -->
<%@include file="/static/include/head.jsp" %>
<sitemesh:head/>
</head>
<body>
<sitemesh:body/>
</body>
</html>
default.jsp代碼以下:
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/static/include/taglib.jsp"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
<title><sitemesh:title/></title>
<%@include file="/static/include/head.jsp" %>
<sitemesh:head/>
</head>
<body id="<sitemesh:getProperty property='body.id'/>" class="<sitemesh:getProperty property='body.class'/>" style="<sitemesh:getProperty property='body.style'/>">
<sitemesh:body/>
<script type="text/javascript">//<!-- 無框架時,左上角顯示菜單圖標按鈕。
if(!(self.frameElement && self.frameElement.tagName=="IFRAME")){
$("body").prepend("<i id=\"btnMenu\" class=\"icon-th-list\" style=\"cursor:pointer;float:right;margin:10px;\"></i><div id=\"menuContent\"></div>");
$("#btnMenu").click(function(){
top.layer.open({
type: 2,
area:['300px','350px'],
content: 'get:${ctx}/sys/menu/treeselect;JSESSIONID=<shiro:principal property="sessionid"/>' //這裏content是一個URL,若是你不想讓iframe出現滾動條,你還能夠content: ['http://sentsin.com', 'no']
});
//top.$.jBox('get:${ctx}/sys/menu/treeselect;JSESSIONID=<shiro:principal property="sessionid"/>', {title:'選擇菜單', buttons:{'關閉':true}, width:300, height: 350, top:10});
//if ($("#menuContent").html()==""){$.get("${ctx}/sys/menu/treeselect", function(data){$("#menuContent").html(data);});}else{$("#menuContent").toggle(100);}
});
}//-->
</script>
</body>
</html>
其中<%@include file=」/static/include/head.jsp」 %>中的head.jsp頁面就是全部js或者css公用引用的頁面,例如:
<%@ page contentType="text/html;charset=UTF-8" %><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="author" content="http://www.jeeplus.org/"/>
<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=9,IE=10" />
<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
<!-- 引入jquery插件 -->
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/TableDnD/jquery.tablednd.js"></script>
<!-- 引入依賴的第三方插件 -->
<script src="${ctxStatic}/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxStatic}/jquery-validation/1.14.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/jquery-validation/1.14.0/localization/messages_zh.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/jquery-validation/1.14.0/additional-methods.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/pace/pace.min.js"></script>
<script src="${ctxStatic}/metisMenu/jquery.metisMenu.js"></script>
......
以上是decorators.xml主要配置文件,根據這個配置文件的註釋能夠看出,須要在每個須要引用公共js或者css的地方添加註釋的一行代碼,以下:
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/static/include/taglib.jsp"%>
<html>
<head>
<title>通知管理</title>
<!-- 這一行代碼是重點 -->
<meta name="decorator" content="default"/>
</head>
<body class="gray-bg">
其中content=「default」中的「default」對應「decorators.xml」配置文件中的「 name」屬性值。
經過上面的配置,在加載完的頁面,點擊右鍵查看源代碼能夠看到加載完頁面會出現head.jsp頁面的代碼。
css