修改primefaces的圖像rowToggler

我需要修改primefaces rowToggler的圖像。這就是我想在CSS文件：修改primefaces的圖像rowToggler

.ui-datatable .ui-row-toggler { 
    cursor: pointer; 
    background-image: url("/resources/images/expand.jpg") ; 
}

我也試圖改變網址/images/expand.jpg，圖像/ expand.jpg和簡單expand.jpg。但是他們沒有一個能找到這個形象。

我缺少什麼？

來源

2012-01-09 Herzog

如果你把你的項目的resources文件夾內的圖片，你應該這樣訪問：

.ui-datatable .ui-row-toggler { 
    cursor: pointer; 
    background-image: url("../javax.faces.resource/expand.jpg.xhtml?ln=images/") ; 
}

的神奇公式應該

../javax.faces.resource/<file-name>.xhtml?ln=<path-to-the-folder>/

所以，如果你的形象在/resources/car/bmw/series7.jpg，您應該訪問它../javax.faces.resource/series7.jpg.xhtml?ln=car/bmw/

來源

2012-01-09 14:40:33

可能無法始終工作，具體取決於當前頁面的位置。如果它在「a/b/c/d.jsf」那麼這將不起作用。 – ClickerMonkey 2012-01-09 14:42:20

：是的，他可能需要根據等級進行更改。但他應該能夠得到它的一般想法 – 2012-01-09 14:44:25

其實我認爲這個問題是特定於rowToggler。當我查看源代碼時，無論我指定的網址如何，我都無法找到expand.jpg。相反，這是在html中打印的內容： – Herzog 2012-01-09 15:45:57

隨着信息這很可能是因爲你的應用程序在「localhost/APP_NAME /」上運行，而當你執行「/ resources/...」時，它指向不存在的「localhost/resources/...」（它應該解析爲「localhost/APP_NAME/resources/...」。

試試這個網址（其具體JSF）

url("#{resource['images:expand.jpg']}")

來源

2012-01-09 14:41:24 ClickerMonkey

其實我認爲這個問題是針對rowToggler的。當我查看源代碼時，無論我指定的網址如何，我都無法找到expand.jpg。相反，這是在html中打印的內容： – Herzog 2012-01-09 15:46:26

<script type="text/javascript"> 
    /*<![CDATA[*/ 
     $(document).on("click", ".ui-icon-circle-triangle-e", function() { 
      $(this).css({ 
       background: 'url(#{request.contextPath}/images/data/silm.gif)' 
      }); 

     }); 
    /*]]>*/ 
    </script> 

    <style type="text/css"> 
     .ui-datatable .ui-row-toggler { 
      cursor: pointer; 
      background: url(#{request.contextPath}/images/data/eklem.gif) ; 
     } 
    </style>

來源

2013-10-18 22:05:19 Ankara

這是一個古老的線程：增加的情況下，其他人認爲這對谷歌的答案。問題來自於這樣的事實：用於添加圖標的類在該行被摺疊時被硬編碼（參見the source code）爲類ui-icon-circle-triangle-e，並且當該行被展開時爲ui-icon-circle-triangle-s。所以要做到這一點的方法是覆蓋樣式表中這些類的定義。這裏是我工作：

.ui-icon-circle-triangle-e { 
    background-image: url('../images/triangleRight.png') !important; 
    background-position: 0px 0px; 
} 

.ui-icon-circle-triangle-s { 
    background-image: url('../images/triangleDown.png') !important; 
    background-position: 0px 0px; 
}

默認值看上去太像簡單的要點 - 用戶被忽視了，他們點擊。

來源

2013-10-23 21:30:55

修改primefaces的圖像rowToggler

回答

相關問題