Primefaces - タブビュータブの背景を変更する

Question

私はPrimeFacesで作業中で、私のtabViewメニュー項目の背景色を編集しようとしていますが、できません。 これは、必要とされるものです。

私はXHTMLでstyleClass属性を追加しています。 （書き込み「...」ではなく、問題に関連していない属性値の長いリストの）

<p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="..."> 
     <p:ajax event="tabChange" listener="..." /> 
     <p:tab > 
      <div> .... </div> 
     </p:tab> 
</p:tabView> 

HTMLが生成されることは次のとおりです。

<div id="tabView" class="..... menu"> 
<ul class="...." role="tablist"> 
    <li class="...." role="tab" aria-expanded="true"> 
     <a href="#">Menu Item 1</a> 
    </li> 
    <li class="...." role="tab" aria-expanded="true"> 
     <a href="#">Menu Item 2</a> 
    </li> 
</ul> 
<div class="ui-tabs-panels"> 
    <div > ..... </div> 
</div> 

クラスメニュー以下のように定義される。コメントされた行は私が試したが、必要以上に異なる結果を与えるものです。

.menu { 
    font-family: Open Sans; 
    /* first attempt: 
    background-size: 5px; 
    background-color: #fff; 
    */ 
    /* second attempt: 
    background: linear-gradient(180deg, #FFF 10px, #ebeff2 100%); 
    */ 
    /* third attempt: 
    background-color: #fff; 
    */ 
} 
.menu ul li { 
    background-color: #fff; 
    background-image: url(../resources/images/menu_sep.png); 
} 

出力はこれです：私が理解から

、問題は、HTMLが<div>要素、ない<ul>に私のmenuクラスを適用する生成したことです。このクラスを<ul>タグに追加する方法はありますか？私は、を<p:ajax>タグと<p:tab>タグに追加しようとしましたが、うまくいきません。 Primefacesのバージョンは3.5です。

Answer 1

​​要素にスタイルクラスを適用する1つの方法は、デフォルトのTabViewレンダラーを上書きすることです。しかし、私はこれが少し過剰だと思います。スタイルクラスのメニューをアンカーとして使用し、.menu > ulのようなCSSセレクタを使用して<div />要素の下にリスト項目をスタイル設定すると、<li />要素のように.menu ul liスタイルのスタイルが作成されます。