带有Primefaces的Twitter Bootstrap(JSF)

Question

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

我已添加到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有关,但不确定在哪里搜索这个bug.

Answer 1

首先,您最好使用h:outputScript加载js文件...

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

PrimeFaces 3.2附带jQuery 1.7.1,所以......

除掉

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

并在<h:head>元素中以下列方式修改include

<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"/>

还可以看看与Primefaces的JQuery冲突？和相关的资源订购.