我无法将我的 js(script.js) 和 css(style.css) 应用到我的页面。我已将它们包含在我的 common.xhtml 中:
<h:head>
<h:outputStylesheet name="common-style.css" library="css" />
<link type="text/css" rel="stylesheet"
href="${request.contextPath}/static/css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="${request.contextPath}/static/js/script.js"></script>
</h:head>
并在我的login.xhtml中调用为:
<ui:composition template="/faces/global/common.xhtml">
这是我的login.xhtml代码:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<!-- Messages must be global here, to show bad credentials -->
<h:messages globalOnly="true"/>
<!-- Id's must not be changed to support spring security check -->
<ui:composition template="/faces/global/common.xhtml">
<ui:define name="content">
<h:form id="userBean">
<h:panelGrid columns="3">
User :
<h:inputText id="name" value="#{loginController.user.userId}"
size="20" required="true"
label="user" >
</h:inputText>
<h:message for="name" style="color:red" />
Password :
<h:inputSecret id="password" value="#{loginController.user.password}"
cols="30" rows="10" required="true"
label="password" >
</h:inputSecret>
<h:commandButton type="submit" id="login" value="Login" action="#{loginController.login}" />
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
和页面代码:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/provider-pay/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/provider-pay/resources/common-style.css" />
<link type="text/css" rel="stylesheet" href="/provider-pay/static /css/styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="/provider-pay/static/js/script.js"></script></head><body>
<div id="page">
<div id="header">
!-- Start Header -->
<div class="Header clearfix">
<!-- Document wrapped -->
<div class="wrapper">
<div id="brand_logo">
<a href="#">prime 340b</a>
</div>
<div class="nav">
<ul>
<li class="current"><a href="#">system</a>
<ul>
<li><a href="organization.html">organization</a> </li>
<li><a href="bin_management.html">BIN management</a></li>
<li><a href="#">old BIN management</a></li>
</ul>
</li>
<li>
<a href="#">client</a>
<ul>
<li><a href="payor.html">payor</a></li>
<li>
<a href="hc.html">health center</a>
<ul>
<li><a href="view_hc.html">view health centers</a></li>
<li><a href="prescribed_panels.html">prescriber panels</a></li>
<li><a href="#">price file</a></li>
<li><a href="#">invoices</a></li>
<li><a href="group_file_config.html">group file config</a></li>
</ul>
</li>
<li>
<a href="#">pharmacy</a>
<ul>
<li><a href="view_parmacy.html">View Pharmacies</a></li>
</ul>
</li>
<li>
<a href="#">prescribers</a>
</li>
</ul>
</li>
<li>
<a href="#">vendors</a>
<ul>
<li><a href="chain_pharmacy.html">chain pharmacy</a></li>
<li><a href="wholesalers.html">wholesaler</a></li>
<li><a href="#">switch</a></li>
<li><a href="#">price verification</a>
<ul>
<li><a href="#">price checking</a></li>
<li><a href="view_package_size.html">package size page</a></li>
</ul>
</li>
<li><a href="prime_vendor.html">Volume Discounts</a></li>
</ul>
</li>
</ul>
</div><!-- end of navigation -->
</div><!-- end of wrapper -->
</div>
<!-- End Header -->
</div>
<div id="content">
<form id="userBean" name="userBean" method="post"
action="/provider-pay/faces/login.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="userBean" value="userBean" />
<table>
<tbody>
<tr>
<td>
User :
</td>
<td><input id="userBean:name" type="text" name="userBean:name" size="20" /></td>
<td></td>
</tr>
<tr>
<td>
Password :
</td>
<td><input id="userBean:password" type="password" name="userBean:password"
value="" /></td>
<td><input id="userBean:login" type="submit" name="userBean:login"
value="Login" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState"
id="javax.faces.ViewState"
value="-89546852753845925:2642184477073405002" autocomplete="off" />
</form>
</div>
<div id="footer">
<!-- start footer -->
<div class="footer">
<p>All rights are reserved</p>
</div>
<!-- end footer -->
</div>
</div></body>
</html>
任何人都可以帮忙解决这个问题吗？ 谢谢
最佳答案
你可以使用类似
<h:head>
<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
<script src="resources/js/default.js"></script>
</h:head>
或
<h:body>
<h:outputStylesheet library="css" name="custom.css"/>
//other code
</h:body>
关于java - css 和 js 不适用于我的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23800018/