javascript - 下拉类在 JSF 中不起作用

Question

我使用 Zurb-Foundation 来设计我的网络前端，使用提供的 CSS 和 JS 库。我使用 NetBeans 7.3.1 作为我的 IDE。当我运行该元素时，我可以正确地看到设计，但看不到某些操作，例如“下拉菜单”。

我使用的模板是 here .我将它作为链接发布，因为如果我使用相同的代码，我不想弄乱这里的代码。

我使用 JSF 作为我的框架，以备不时之需。

我的引用资料如下:

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/custom.modernizr.js"></script>
<title>Something</title>
</h:head>

可能有什么问题？它与netbeans有关吗？或者 JSF 的 CSS/JS 有问题？因为当我在 Foundation 网页上查看模板时，我可以在浏览器中看到下拉菜单。

Answer 1

初学者的一个常见错误是他们认为 <link> 中指定的路径和 <script>资源表示相对于 Web 元素文件夹结构的本地磁盘文件系统路径。然而这是错误的。它们表示与最终用户在浏览器地址栏中看到的请求 URL 相关的具体 URL。也就是说，最终是网络浏览器必须单独下载这些 CSS/JS 资源，而不是网络服务器必须以某种方式将它们包含在 HTML 输出中。

此外，您应该使用 JSF 资源处理工具和类似 <h:outputStylesheet> 的组件。和 <h:outputScript> .给定以下 Web 元素文件夹结构，

WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 |    |-- general
 |    |    `-- css
 |    |         |-- foundation.css
 |    |         `-- normalize.css
 |    `-- vendor
 |         `-- js
 |              `-- custom.modernizr.js
 |-- page.xhtml
 :

应该这样做:

<h:outputStylesheet library="general" name="css/normalize.css" />
<h:outputStylesheet library="general" name="css/foundation.css" />
<h:outputScript library="vendor" name="js/custom.modernizr.js" />

另见:

• > How to reference CSS / JS / image resource in Facelets template?