Question

我被分配了重新设计用户界面的任务，该界面由基于JSF 2.1 / Richfaces 4.2框架和CSS（用Sass编写）的Html组成。 JSF由Java Beans在后端管理。该任务还包括响应式设计的集成。

至于响应式设计，我决定使用bootstrap 3.3.7 - 如果你知道更好的方法，请告诉我！

我已经成功地在我的项目中集成了Bootstrap，并且可以访问我的JSF文件中的样式类。所以CSS工作正常，问题来自JavaScript（至少这是我的想法） - ＆gt;例如下拉列表没有打开/折叠，我已经在多个帖子中读过，这与Bootstrap和Richfaces之间的JQuery冲突有关。 JQuery - 但加载Richfaces＆＃39; JQuery首先没有为我解决问题。

名为menu.xhtml：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
 <f:facet name="first">
    <h:outputScript name="js/jquery.js"></h:outputScript>
    <h:outputScript name="js/bootstrap.js"></h:outputScript>
 </f:facet>
</h:head>

   <div class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Anmeldung<span class="caret"> </span></a>
      <ul class="dropdown-menu" role="menu">
          <li><h:commandLink href="#">Action</h:commandLink></li>
      </ul>
   </div>

我现在尝试使用一个映射创建 static-resource-mappings.properties 文件，以便将所有对jquery.js的请求作为jquery-alternative-version.js的请求提供：< / p>

jquery.js=resources/jquery-alternative-version.js

我的 web.xml ：

<context-param>
    <param-name>org.richfaces.resourceMapping.enabled</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.resourceMapping.mappingFile</param-name>
    <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value>
</context-param>

然而，这仍然没有让Dropdown（以及Javascript）为我工作。我错过了什么吗？

注意：bootstrap.css和richfaces＆＃39; jquery.js出现在chromes开发人员工具中 - ＆gt;来源

Answer 1

我刚刚将我的Bootstrap引用置于最底层，解决了我所有的问题。

<h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" />
<h:outputScript library="bootstrap" name="js/bootstrap.js"></h:outputScript>
</h:body>
</html>

Richfaces的JQuery以某种方式加载到文件的末尾。希望这对其他人也有帮助！

在现有Web应用程序中集成Bootstrap

1 个答案: