2012-01-09 12 views
2

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にURLを変更しようとしています。しかし、彼らの誰もイメージを見つけることはできません。

私には何が欠けていますか?あなたのプロジェクトのresourcesフォルダ内のあなたのイメージを入れている場合、あなたはこのようにアクセスする必要があり

答えて

1

.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/

+0

は、現在のページの場所によっては機能しない場合があります。それが "a/b/c/d.jsf"にある場合、これは動作しません。 – ClickerMonkey

+1

:Pええ、彼はレベルに基づいて変更する必要があるかもしれません。しかし、彼はそれを持って一般的な考えを得ることができるはずです –

+0

実際には、この問題はrowTogglerに固有のものだと思います。ソースを見ると、指定しているURLに関係なくexpand.jpgが見つかりません。代わりに、これはhtmlで印刷されたものです: Herzog

1

でアクセスしてくださいあなたが "localhost/APP_NAME /"で実行しているアプリケーションを持っていて、 "/ resources/..."を実行しているために、 "localhost/resources/..."を指しています( "localhost/APP_NAME/resources/..."に解決する必要があります)。

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

実際、この問題はrowTogglerに固有の問題だと思います。ソースを見ると、指定しているURLに関係なくexpand.jpgが見つかりません。代わりに、これはhtmlで表示されるものです。 Herzog

0
<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> 
1

(そのJSFは、特定の)URLの代わりにこれを試してみてくださいこれは古いスレッドです:場合の答えを追加する他の誰がGoogleでこれを見つけました。この問題は、アイコンを追加するために使用されるクラスが、行が折りたたまれたときにクラスui-icon-circle-triangle-eであることがハードコードされていること(the source codeを参照)と、行が展開されたときにui-icon-circle-triangle-sであることに起因します。だから、これを行う方法は、あなたのスタイルシートでそれらのクラスの定義をオーバーライドすることです。ここでは私のために働いた:

デフォルトはあまりにも単純な箇条書きのように見えた - ユーザーはクリック可能であることを見落としていた。

関連する問題