下拉类在 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>

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

Answer 1

初学者

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

此外，您应该使用带有 <h:outputStylesheet> 和 <h:outputScript> 等组件的 JSF 资源处理工具。给定以下 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" />

另请参阅：

• 如何在小面模板中引用 CSS/JS/图像资源？