menucontents.jsp 的内容
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:subview id="menucontents">
<f:loadBundle basename="com.cpc.resources.menu" var="menu"/>
<t:div id="hNav_outer">
<t:panelNavigation2 id="nav1" layout="list" itemClass="off" activeItemClass="on" openItemClass="on"
renderAll="true">
<t:commandNavigation2 value="#{menu['menu_Home']}" style="padding-left: 0px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_Home']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
<t:commandNavigation2 value="#{menu['menu_admin']}" style="padding-left: 150px;">
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_change_password']}"/>
</t:commandNavigation2>
<t:commandNavigation2>
<f:verbatim>› </f:verbatim>
<t:outputText value="#{menu['menu_admin_forgot_password']}"/>
</t:commandNavigation2>
</t:commandNavigation2>
</t:panelNavigation2>
</t:div>
</f:subview>
menu.jsp 的内容
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/css/basic.css" />
</head>
<body>
<f:view>
<jsp:include page="menucontents.jsp" />
</f:view>
</body>
</html>
从浏览器查看源代码
<html>
<head>
<script type="text/javascript" src="/cpcnew/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/12973772/navmenu.htmlnavmenu.HtmlPanelNavigationMenu/HMenuIEHover.js"><!--
//--></script>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8" />
<title>MyFaces - the free JSF Implementation</title>
<link rel="stylesheet" type="text/css" href="/cpcnew/pages/css/basic.css" />
</head>
<body>
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
<li class="off"><script type="text/javascript"><!--
function oamSetHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]=='undefined')
{
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('id',name);
newInput.setAttribute('name',name);
newInput.setAttribute('value',value);
form.appendChild(newInput);
}
else
{
form.elements[name].value=value;
}
}
function oamClearHiddenInput(formname, name, value)
{
var form = document.forms[formname];
if(typeof form.elements[name]!='undefined')
{
form.elements[name].value=null;
}
}
function oamSubmitForm(formName, linkId, target, params)
{
var clearFn = 'clearFormHiddenParams_'+formName.replace(/-/g, '\$:').replace(/:/g,'_');
if(typeof eval('window.'+clearFn)!='undefined')
{
eval('window.'+clearFn+'(formName)');
}
if(typeof window.getScrolling!='undefined')
{
oamSetHiddenInput(formName,'autoScroll',getScrolling());
}
var oldTarget = '';
if((typeof target!='undefined') && target != null)
{
oldTarget=document.forms[formName].target;
document.forms[formName].target=target;
}
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamSetHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamSetHiddenInput(formName,formName +':'+'_idcl',linkId);
if(document.forms[formName].onsubmit)
{
var result=document.forms[formName].onsubmit();
if((typeof result=='undefined')||result)
{
document.forms[formName].submit();
}
}
else
{
document.forms[formName].submit();
}
if(oldTarget==null) oldTarget='';
document.forms[formName].target=oldTarget;
if((typeof params!='undefined') && params != null)
{
for(var i=0; i<params.length; i++)
{
oamClearHiddenInput(formName,params[i][0], params[i][1]);
}
}
oamClearHiddenInput(formName,formName +':'+'_idcl',linkId);return false;
}
//--></script><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp0');" id="menucontents:nav1:_idJsp0" class="off">Home</a><ul style="padding-left: 0px;">
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp1');" id="menucontents:nav1:_idJsp1" class="off">› Home</a></li></ul></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp4');" id="menucontents:nav1:_idJsp4" class="off">Administrator</a><ul style="padding-left: 150px;">
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp5');" id="menucontents:nav1:_idJsp5" class="off">› Change Password</a></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp8');" id="menucontents:nav1:_idJsp8" class="off">› Forgot Password</a></li></ul></li>
</ul></div>
<script type="text/javascript"><!--
function getScrolling()
{
var x = 0; var y = 0;if (self.pageXOffset || self.pageYOffset)
{
x = self.pageXOffset;
y = self.pageYOffset;
}
else if ((document.documentElement && document.documentElement.scrollLeft)||(document.documentElement && document.documentElement.scrollTop))
{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
else if (document.body)
{
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
return x + "," + y;
}
//--></script>
</body>
</html>
最佳答案
看起来 CSS 依赖于 HTML 源代码中的特定 HTML 元素 ID。在将内容拆分为 <f:subview id="menucontents"> 之前, 以下元素
<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">
生成如下
<div id="hNav_outer">
<ul id="nav1">
Tomahawk CSS 示例样式表显然依赖于这些 ID
#hNav_outer {
...
}
#nav1 {
...
}
但是，随着拆分为<f:subview id="menucontents"> , JSF 将在生成的 HTML 元素 ID 前加上 <f:subview> 的 ID .因此，您还需要更改 CSS。
#menucontents\3A hNav_outer {
...
}
#menucontents\3A nav1 {
...
}
\3A背后还有一个特别的故事| : 冒号 :是 CSS 标识符中的非法字符。这是早期 JSF 1.x 版本中的一个疏忽。在 JSF 2.x 中，这是通过制作 JSF 客户端 ID 分隔符 : 来解决的。可配置的(您可以将其指定为例如 _，这又在 CSS 中有效)。
你也可以像下面这样转义冒号
#menucontents\:hNav_outer {
...
}
#menucontents\:nav1 {
...
}
但这在 IE6/7 中不起作用，因此建议使用 \3A (带有尾随空格!)而不是 CSS 选择器中的冒号。
关于css - JSF 菜单未格式化 STLyed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4963668/