2013-04-12 24 views
1

我使用一些jQuery函數在我的JSF項目,我想從這個函數從我的項目的資源文件夾一個形象:得到jQuery函數在XHTML文件JSF2一個圖像文件

我測試了這一點:

$('.ui-datagrid-column').live('mousemove',function(){ 
      $(this).css('background-image', '../resources/images/vert_degrade.PNG');   

     }); 

,但它沒有找到圖像文件

這裏的結構:enter image description here

而且這個文件是在頁面DIRECTO RY

我怎麼能做到這一點

回答

1

如果指定CSS background-image屬性相對URL,然後將其變成相對於包含JS代碼的當前請求的資源的請求URL。所以,如果你在一個JS文件中聲明它,那麼它是相對於JS文件本身的請求URL。或者,如果您在JSF頁面中聲明它,那麼它與JSF文件本身的請求URL有關。它與大多數啓動程序錯誤地假定的服務器端磁盤文件系統路徑中的物理位置無關。

因此,您的相對URL顯然是錯誤的。在JSF Web應用程序中,除其他外,JSF資源處理程序的URL前綴/javax.faces.resource甚至面向小服務程序映射(如/faces/*)最有可能導致相對URL錯誤地解析。您需要查看請求URL並從中提取適當的相對URL。

或者,如果JS代碼位於<script>或JSF頁面的<h:outputScript>裏面,那麼你也可以使用EL隱#{resource}映射到一個資源標識符轉換爲fullworthy資源網址:

例如

<h:outputScript> 
    $('.ui-datagrid-column').live('mousemove',function(){ 
     $(this).css('background-image', '#{resource['images/vert_degrade.PNG']}');   
    }); 
</h:outputScript> 

好多是建立在由<h:outputStylesheet>加載,因爲它支持評估的CSS文件中EL表達式一個獨立的CSS文件中的CSS聲明。

.vert-degrade { 
    background-image: url('#{resource['images/vert_degrade.PNG']}'); 
} 

$('.ui-datagrid-column').live('mousemove',function(){ 
    $(this).addClass('vert-degrade'); 
}); 

讓JS代碼可以被保存在自己的JS文件。

+0

謝謝BalusC,我在'

相關問題