Question

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>&#8250; </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>&#8250; </f:verbatim>
                    <t:outputText value="#{menu['menu_admin_change_password']}"/>
                </t:commandNavigation2>
                <t:commandNavigation2>
                    <f:verbatim>&#8250; </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>

查看来自broswer的来源

<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">&#8250; 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">&#8250; Change Password</a></li>
<li class="off"><a href="#" onclick="return oamSubmitForm('linkDummyForm','menucontents:nav1:_idJsp8');" id="menucontents:nav1:_idJsp8" class="off">&#8250; 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>

enter image description here

Answer 1

看起来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中不起作用，因此建议在CSS选择器中使用\3A（带尾随空格！）而不是冒号。

JSF菜单没有格式化样式

1 个答案: