Css JSF菜单没有格式化_Css_Jsf_Include_Tomahawk

Css JSF菜单没有格式化

css jsf

Css JSF菜单没有格式化,css,jsf,include,tomahawk,Css,Jsf,Include,Tomahawk,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="menucon

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>


MyFaces——免费的JSF实现

从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>


MyFaces——免费的JSF实现

看起来CSS非常依赖于HTML源中的特定HTML元素ID。在将内容拆分为

之前，请使用以下元素

<div id="menucontents:hNav_outer">
<ul id="menucontents:nav1">

但是，当拆分为

时，JSF将在生成的HTML元素ID前面加上

的ID。所以你也需要修改CSS

#menucontents\3A hNav_outer {
    ...
}

#menucontents\3A nav1 {
    ...
}

\3A

背后有一个特殊的故事：冒号

：

在CSS标识符中是非法字符。这是早期JSF1.x版本中的一个疏忽。在JSF2.x中，通过将JSF客户机ID分隔符

：

设置为可配置的（您可以将其指定为例如

\uu

，这反过来在CSS中是有效的）来解决这个问题

你也可以像下面那样逃离结肠

#menucontents\:hNav_outer {
    ...
}

#menucontents\:nav1 {
    ...
}

但这在IE6/7中不起作用，因此建议在CSS选择器中使用

\3A

（带尾随空格！），而不是冒号。

菜单没有像我作为独立文件执行时那样显示出来我不确定Tomahawk部分，但你的意思是没有应用CSS样式吗？如果是这样，那么您的CSS的

URL可能是错误的，或者CSS是不完整的。尝试在普通浏览器中打开以查看是否获得CSS样式表文件。@BalusC路径与独立文件中的路径相同。。。我需要确认的一件事是，我需要在menu.jsp或menucontent.jsp中包含css文件。目前，它在menu.jsp中。我也尝试打开该文件，并能够访问css文件。我有一个屏幕截图，我想与大家分享。我无法附加它。通过母版页加载css完全可以。至于这个问题，是你自己的CSS吗？在

中，子组件将获得一个不同的ID，即前缀为

ID的ID。您在CSS中考虑到了这一点吗？我不知道如何感谢您非常感谢您如此详细的解释我只是忽略了CSS部分，我认为它应该可以工作。。。。。好消息是，我删除了，它在不改变CSS的情况下工作了。再次感谢您，非常感谢您帮助我解释问题，并给出可行的解决方案。。。学习JSF是一种痛苦，但现在和你在一起我很喜欢：）

#menucontents\3A hNav_outer {
    ...
}

#menucontents\3A nav1 {
    ...
}

#menucontents\:hNav_outer {
    ...
}

#menucontents\:nav1 {
    ...
}