css - JSFメニューが正しくフォーマットされない

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>

ここに画像の説明を入力してください

score 2 · Accepted Answer

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 の前にの ID を追加します<f:subview>。したがって、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 では機能しないため、\3ACSS セレクターのコロンの代わりに (末尾にスペースを付けて) 使用することをお勧めします。

css - JSFメニューが正しくフォーマットされない

1 に答える 1

Related

Reference