Javascript 使用 Primefaces (JSF) 的 Twitter Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10205318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap with Primefaces (JSF)
提问by Thor
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).
我正在尝试将 Primefaces 3.2（也许它通常与 JSF 相关）与 Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap) 一起使用。
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>:
我在 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>
This works fine on the JSF page, but if I add a simple p:dataTable
这在 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>
the dropdown menu is not working anymore. I suppose it's JavaScript related, but not sure where to search for this bug.
下拉菜单不再起作用。我想它与 JavaScript 相关，但不确定在哪里搜索此错误。
采纳答案by Daniel
First of all you better use h:outputScriptto load js files...
首先你最好使用h:outputScript加载js文件...
I think its cause of conflicts between primefaces jquery and the manually included one...
我认为它的原因是primefaces jquery 和手动包含的jquery 之间的冲突......
PrimeFaces 3.2 comes with jQuery 1.7.1, So...
PrimeFaces 3.2 带有 jQuery 1.7.1，所以...
Remove the
去除那个
<script src="/resources/js/jquery-1.7.2.js"></script>from your code
<script src="/resources/js/jquery-1.7.2.js"></script>从你的代码
and modify your include in the following way in your <h:head>element
并在您的<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"/>
Also take a look at JQuery Conflicts with Primefaces?and related resource ordering.
还要看看JQuery 与 Primefaces 的冲突？以及相关的资源排序。
回答by Andrés Canavesi
there is an easier way to add this theme.
有一种更简单的方法来添加这个主题。
If you are using a mavenproject bases do this:
如果您使用的是Maven项目基础，请执行以下操作：
Add dependency
添加依赖
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>all-themes</artifactId>
<version>1.0.9</version>
</dependency>
Or add a specific theme dependency
或者添加一个特定的主题依赖
Add this in your web.xml
将此添加到您的web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
If you are not using Maven, download the jar manually and add It to your classpath:
如果您没有使用 Maven，请手动下载 jar 并将其添加到您的类路径中：
http://repository.primefaces.org/org/primefaces/themes/
http://repository.primefaces.org/org/primefaces/themes/
References:
参考：
回答by nfechner
You are including JQuery twice (Primefaces imports it automatically). Remove your manual import:
您将 JQuery 包含两次（Primefaces 自动导入它）。删除手动导入：
<script src="/erp/resources/js/jquery-1.7.2.js"></script>
and everything should work.
一切都应该有效。
