使用 Primefaces (JSF) 的 Twitter Bootstrap [英] Twitter Bootstrap with Primefaces (JSF)

问题描述

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

I'm trying to use Primefaces 3.2 (perhaps it's related to JSF in general) with Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).

我在 starter-example (http://twitter.github.com/bootstrap/examples/starter-template.html) 中添加了一个下拉菜单，其中包含 <h:head> 中的以下脚本;:

I've added to the starter-example (http://twitter.github.com/bootstrap/examples/starter-template.html) a drop down menu with the following scripts in <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

This works fine on the JSF page, but if I add a simple 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 相关，但不确定在哪里搜索此错误.

the dropdown menu is not working anymore. I suppose it's JavaScript related, but not sure where to search for this bug.

推荐答案

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

First of all you better use h:outputScript to load js files...

我认为是primefaces jquery和手动包含的jquery之间发生冲突的原因...

I think its cause of conflicts between primefaces jquery and the manually included one...

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

PrimeFaces 3.2 comes with jQuery 1.7.1, So...

删除

<script src="/resources/js/jquery-1.7.2.js"></script> 来自您的代码

并在 元素中按以下方式修改包含

and modify your include in the following way in your <h:head> element

<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 与 Primefaces 冲突? 和相关的 资源订购.

Also take a look at JQuery Conflicts with Primefaces? and related resource ordering.

这篇关于使用 Primefaces (JSF) 的 Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！