我正在尝试将Primefaces 3.2(也许它与JSF有关)与Twitter Bootstrap 2.0.2(http://twitter.github.com/bootstrap)一起使用。
我在初学者示例 (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相关,但不确定在哪里搜索此错误。
首先,您最好使用 h:outputScript
来加载 js 文件...
我认为它导致素数面 jquery 和手动包含的冲突的原因......
PrimeFaces 3.2 附带 jQuery 1.7.1,所以...
删除
从代码中<script src="/resources/js/jquery-1.7.2.js"></script>
并在<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"/>
另请查看 JQuery 与 Primefaces 的冲突?以及相关的资源排序。
更简单的方法来添加此主题。
如果您使用的是 maven 项目库,请执行以下操作:
添加依赖项
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>all-themes</artifactId>
<version>1.0.9</version>
</dependency>
或者添加特定的主题依赖项
在您的网站上添加此内容.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
如果您没有使用 Maven,请手动下载 jar 并将其添加到您的类路径中:
http://repository.primefaces.org/org/primefaces/themes/
引用:
- http://www.primefaces.org/showcase-labs/ui/home.jsf?theme=bootstrap
- http://blog.primefaces.org/?p=2139
- http://primefaces.org/themes.html
你包含 JQuery 两次(Primefaces 会自动导入它)。删除手动导入:
<script src="/erp/resources/js/jquery-1.7.2.js"></script>
一切都应该工作。