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

Question

我正在使用 Zurb-Foundation 来设计我的 Web 前端，使用提供的 CSS 和 JS 库。我使用 NetBeans 7.3.1 作为我的 IDE。当我运行项目时，我可以正确地看到设计，但看不到一些动作，比如“下拉菜单”。

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

我使用 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" />

也可以看看：

• 如何在 Facelets 模板中引用 CSS / JS / 图片资源？