Question

我正在使用PrimeFaces。由于PrimeFaces使用自己的jQuery，jqueryUI，jQuery-UI.css。我正在使用ui：组合。我做了什么，我在模板页面中添加了一行，如下所示

layout.xhtml

 <h:head>       
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        <ui:insert name="title">Login</ui:insert> 
    </title>      
    <ui:insert name="style"></ui:insert>
</h:head>

然后在我的页面上，我使用了类似的东西

<h:body>
    <ui:composition template="./WEB-INF/templates/layout.xhtml">           
        <ui:define name="title">Add News</ui:define>
        <ui:define name="style"><h:outputStylesheet library="css" name="basit.css"/> </ui:define>
        <ui:define name="content">
            <h:form id="news_advertisement_form"  >
            ...
            </h:form>
        </ui:define>
    <ui:composition>
</h:body>

这包括我的页面上的basit.css，但问题是，css包括在primefaces css和jQueries之前。我希望我的CSS出现在PrimeFaces Css和jqueries之后。我该怎么做？感谢

Answer 1

<h:head>
    <!--This css will come just before Prime Faces skin.css -->
    <h:outputStylesheet library="css" name="messageDialogStyle.css" />
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript >
        $ = jQuery;
    </h:outputScript>
    <h:outputScript library="Javascripts" name="default.js" />
    <h:outputScript library="Javascripts" name="jquery.dialog.js" />

    <!--These all come after PrimeFaces css -->
    <link rel="stylesheet" type="text/css" href="css/humera.css" />
    <link rel="stylesheet" href="css/witp.css" type="text/css" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>
        <ui:insert name="title">Login</ui:insert> 
    </title>

    <ui:insert name="style"></ui:insert>

</h:head>
<h:body>       
    <div>
        <ui:insert name="top1">
            <ui:insert name="style"></ui:insert>
            <ui:include src="header.xhtml" id="header"/>
            </ui:insert>
    </div>
    ....

</h:body>

Answer 2

PrimeFaces记录了一个问题，讨论了这个问题。

http://code.google.com/p/primefaces/issues/detail?id=2454

基本上h:head组件在包含h:head内的元素后呈现PrimeFaces样式表和javascripts。这个问题看起来也是一样的。

http://code.google.com/p/primefaces/issues/detail?id=2478

此问题在3.0中已标记为已修复，但您应尝试在h:body代码中插入样式表而不是h:head作为可能的解决方法。

如何覆盖Primefaces jQuery和css

2 个答案: