2011-11-24 10 views
0

WebアプリケーションにjQuery-DatePickerを統合したいと思います。jQuery(datepicker)統合と画像の問題のパス

私はscrips、css、imagesをダウンロードし、対応するディレクトリ:scripts、css、およびimagesに入れました。

私はその後scripts.xhtmlでそれらを定義した:

<ui:composition 
xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:outputScript library="scripts" name="jquery-1.3.2.min.js"/> 
<h:outputScript library="scripts" name="jquery-ui-1.7.1.custom.min.js"/> 
<h:outputScript library="scripts" name="daterangepicker.jQuery.js"/></ui:composition> 

とstyles.xhtml。

<ui:composition 
xmlns="http://www.w3.org/1999/xhtml" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:outputStylesheet library="css" name="commons.css"/> 
<h:outputStylesheet library="css" name="styles.css"/> 
<h:outputStylesheet library="css" name="doi.css"/> 
<h:outputStylesheet library="css" name="ui.daterangepicker.css"/> 
<h:outputStylesheet library="css" name="redmond/jquery-ui-1.7.1.custom.css"/> 

<!-- PRINT STYLES --> 
<!-- Note: there is currently no way to determine the "media" attribute with h:outputStylesheet --> 
<link rel="stylesheet" media="print" href="${facesContext.externalContext.requestContextPath}/javax.faces.resource/css/print.css.xhtml" type="text/css" /></ui:composition> 

問題は、関連するすべての画像がロード/検出されないということです。

例:バックグラウンドは対応するパスではないCSS - > background-image:url( "images/ui-icons_d8e7f3_256x240.png")にハードコードされています...

どこか別の場所を指定する必要がありますか?私は手動でスクリプトとCSSのすべてのパスを変更する必要があると想像することはできません...

+0

あなたのケースでは、パスは実際のファイルとの親和性があります。 jquery uiの '/ images'をcssファイルと同じディレクトリに保存すれば、正しく参照されます –

答えて

2

これらの画像は/cssフォルダの/imagesサブフォルダにある必要があります。


無関係具体的な問題に、あなたは本当に正しい方法をlibrary使用していません。これは、 "テーマ"の共通ライブラリを表す必要があります。次のようにあなたが実際にリソースを宣言する必要がありますので、しかし、あなたは、デフォルトのライブラリでそれらすべてを持っているように見える:

<h:outputScript name="scripts/jquery-1.3.2.min.js"/> 
<h:outputScript name="scripts/jquery-ui-1.7.1.custom.min.js"/> 
<h:outputScript name="scripts/daterangepicker.jQuery.js"/> 

<h:outputStylesheet name="css/commons.css"/> 
<h:outputStylesheet name="css/styles.css"/> 
<h:outputStylesheet name="css/doi.css"/> 
<h:outputStylesheet name="css/ui.daterangepicker.css"/> 
<h:outputStylesheet name="css/redmond/jquery-ui-1.7.1.custom.css"/> 

はまた、media属性のサポートはJSF 2.1以降<h:outputStylesheet>に存在している:

<h:outputStylesheet media="print" name="css/print.css" />