15

我正在尝试将 Primefaces 3.2（也许它通常与 JSF 相关）与 Twitter Bootstrap 2.0.2（http://twitter.github.com/bootstrap）一起使用。

我在 starter-example (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 相关，但不确定在哪里搜索这个错误。

4

3 回答 3

8

首先你最好用h:outputScript加载js文件...

我认为它导致primefaces jquery和手动包含的冲突的原因......

PrimeFaces 3.2 带有 jQ​​uery 1.7.1，所以...

去除那个

<script src="/resources/js/jquery-1.7.2.js"></script>从你的代码

<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？以及相关的资源排序。

于 2012-04-18T08:14:12.290 回答
4

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

如果您使用的是maven项目库，请执行以下操作：

添加依赖

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

或者添加特定的主题依赖

在你的web.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-22T15:19:44.893 回答
1

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

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

一切都应该工作。

于 2012-04-18T08:21:16.447 回答