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>

class菜单定义如下。注释行是我尝试过的行，但给出的结果与要求的不同。

.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 将我的 menu class 应用于 <div> 元素，而不是 <ul>。有什么方法可以将这个 class 添加到 <ul> 标签中吗？我尝试将 styleClass="menu" 添加到 <p:ajax> 和 <p:tab> 标签，但这不起作用。 Primefaces 版本是 3.5.

Answer 1

将样式 class 应用到 <ul /> 元素的一种方法是覆盖默认的 TabView 渲染器。但我认为这有点过分了。为什么不将样式 class menu 仅用作锚点，并使用 css 选择器创建一些样式，例如 .menu > ul 以设置列表项下的样式<div /> 元素就像您已经用 .menu ul li 风格对 <li /> 元素所做的那样？

Primefaces - 更改 tabView 选项卡的背景

Primefaces - Change background of tabView tabs

css

jsf

tabview