与Primefaces（JSF）的Twitter Bootstrap

我试图用Twitter Bootstrap 2.0.2（http://twitter.github.com/bootstrap）使用Primefaces 3.2（也许它与JSF相关）。与Primefaces（JSF）的Twitter Bootstrap

我已经加入到起动例子（http://twitter.github.com/bootstrap/examples/starter-template.html）下拉菜单中使用以下脚本在<h:head>：

<script src="/resources/js/bootstrap.js"></script> 
<script src="/resources/js/jquery-1.7.2.js"></script> 
<script src="/resources/js/bootstrap-dropdown.js"></script>

这工作的JSF页面上很好，但如果我添加了一个简单p:dataTable

<p:dataTable var="i" value="#{testBean.list}"> 
    <p:column> 
    <f:facet name="header"><h:outputText value="Item"/></f:facet> 
    <h:outputText value="#{i}"/> 
    </p:column> 
</p:dataTable>

下拉菜单不再工作。我想这是JavaScript相关的，但不知道在哪里搜索这个错误。

来源

2012-04-18 Thor

你能否也请张贴相关的呈现HTML代码。 – nfechner 2012-04-18 08:03:44

呈现的HTML代码位于以下位置：http://pastebin.com/avpKPnai – Thor 2012-04-18 08:10:21

首先你更好的使用h:outputScript加载js文件的...

我认为其原因primefaces jQuery和手动包括一个之间的冲突......

PrimeFaces 3.2自带的jQuery 1.7。 1，所以...

从您的代码

和作案删除

<script src="/resources/js/jquery-1.7.2.js"></script> FY您包括以下列方式在<h:head>元素

<f:facet name="first"> 
    <h:outputScript library="js" name="bootstrap.js"/> 
</f:facet> 
<h:outputScript library="primefaces" name="jquery/jquery.js"/> 
<h:outputScript library="js" name="bootstrap-dropdown.js"/>

而且看看JQuery Conflicts with Primefaces?及相关resource ordering。

来源

2012-04-18 08:14:12 Daniel

下拉菜单仍不起作用。通过停用'p：dataTable'，它也不起作用。（我已经删除了手册''，可以吗？）。 jQuery应该从Primefaces库中加载，因为它会被渲染：'

您将包含JQuery两次（Primefaces自动导入）。删除您的手动导入：

<script src="/erp/resources/js/jquery-1.7.2.js"></script>

和一切都应该工作。

来源

2012-04-18 08:21:16 nfechner

我可以验证JQuery是由Primefaces在渲染输出中导入的，但DropDown菜单无法正常工作。 – Thor 2012-04-18 08:31:15

有一个更简单的方法来添加此主题。

如果您使用的是行家项目基地做：

添加依赖

<dependency> 
     <groupId>org.primefaces.themes</groupId> 
     <artifactId>all-themes</artifactId> 
     <version>1.0.9</version> 
    </dependency>

或者添加一个特定的主题依赖

在网站添加此。XML

<context-param> 
     <param-name>primefaces.THEME</param-name> 
     <param-value>bootstrap</param-value> 
    </context-param>

如果你不使用Maven，手动下载的jar并将其添加到您的类路径：

http://repository.primefaces.org/org/primefaces/themes/

参考文献：

来源

2013-03-22 15:19:44

与Primefaces（JSF）的Twitter Bootstrap

回答

相关问题