[英]Twitter Bootstrap with Primefaces (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). 我正在尝试使用Twitter Bootstrap 2.0.2(http://twitter.github.com/bootstrap)使用Primefaces 3.2(也许它与JSF有关)。
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>
: 我已经在
<h:head>
添加了以下脚本的初始示例(http://twitter.github.com/bootstrap/examples/starter-template.html)下拉菜单:
<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有关,但不确定在哪里搜索这个bug。
First of all you better use h:outputScript
to load js files... 首先你最好使用
h:outputScript
来加载js文件......
I think its cause of conflicts between primefaces jquery and the manually included one... 我认为它在primefaces 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>
元素中以下列方式修改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"/>
Also take a look at JQuery Conflicts with Primefaces? 还可以看看与Primefaces的JQuery冲突? and related resource ordering .
和相关的资源订购 。
there is an easier way to add this theme. 有一种更简单的方法来添加这个主题。
If you are using a maven project 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: 参考文献:
You are including JQuery twice (Primefaces imports it automatically). 你包括JQuery两次(Primefaces自动导入它)。 Remove your manual import:
删除手动导入:
<script src="/erp/resources/js/jquery-1.7.2.js"></script>
and everything should work. 一切都应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.