带有Primefaces的Twitter Bootstrap(JSF) [英] Twitter Bootstrap with Primefaces (JSF)
问题描述
我正在尝试使用Twitter Bootstrap 2.0.2(http://twitter.github.com/bootstrap)使用Primefaces 3.2(可能与JSF有关)。
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有关,但不知道在哪里搜索这个bug。
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...
我认为它的主要原因是jquery和手工包含的冲突之间的冲突。 ..
I think its cause of conflicts between primefaces jquery and the manually included one...
PrimeFaces 3.2附带jQuery 1.7.1,所以......
PrimeFaces 3.2 comes with jQuery 1.7.1, So...
删除
< script src =/ resources / js / jquery-1.7.2.js>< / script>
从您的代码
并在< h:head>
元素中以下列方式修改您的包含
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冲突?和相关的资源订购。
这篇关于带有Primefaces的Twitter Bootstrap(JSF)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!