2

rich:tabPanel を追加し、tabPanel のスタイルを適用しました。しかし、tabPanel 内のタブの背景色を追加することはできません。誰かが rich:tab の styleClass を教えてもらえますか?

XTML

<td width="80%" height="100%" style="vertical-align: top;"><rich:tabPanel
                                id="tabId" switchType="ajax" >
                                <rich:tab id="section1">
                                    <ui:include src="/pages/design/hrms/Section1.xhtml" />
                                </rich:tab>
                                <rich:tab id="section2" header="#{msg.lbl_section2}">
                                    <ui:include src="/pages/design/hrms/Section2.xhtml" />
                                </rich:tab>
                                <rich:tab id="section3" header="#{msg.lbl_section3}">
                                    <ui:include src="/pages/design/hrms/Section3.xhtml" />
                                </rich:tab>
                                <rich:tab id="section4" header="#{msg.lbl_section4}">
                                    <ui:include src="/pages/design/hrms/Section4.xhtml" />
                                </rich:tab>
                                <rich:tab id="section5" header="#{msg.lbl_section5}">
                                    <ui:include src="/pages/design/hrms/Section5.xhtml" />
                                </rich:tab>
                                <rich:tab id="section6" header="#{msg.lbl_section6}">
                                    <ui:include src="/pages/design/hrms/Section6.xhtml" />
                                </rich:tab>
                                <rich:tab id="section7" header="#{msg.lbl_section7}">
                                    <ui:include src="/pages/design/hrms/Section7.xhtml" />
                                </rich:tab>
                                <rich:tab id="section12" header="#{msg.lbl_section12}">
                                    <ui:include src="/pages/design/hrms/Section12.xhtml" />
                                </rich:tab>
                                <rich:tab id="section13" header="#{msg.lbl_section13}">
                                    <ui:include src="/pages/design/hrms/Section13.xhtml" />
                                </rich:tab>
                                <rich:tab id="section14" header="#{msg.lbl_section14}">
                                    <ui:include src="/pages/design/hrms/Section14.xhtml" />
                                </rich:tab>
                            </rich:tabPanel></td>

スタイル.css

.rf-tab-hdr-spcr {
    background: rgb(255, 255, 255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,
        255, 255, 1) ), color-stop(35%, rgba(255, 255, 255, 1) ),
        color-stop(100%, rgba(161, 214, 255, 1) ) ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% );
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 2%,
        rgba(255, 255, 255, 1) 35%, rgba(161, 214, 255, 1) 100% ); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(             startColorstr='#ffffff',
        endColorstr='#a1d6ff', GradientType=0 ); /* IE6-9 */
}

ここに画像の説明を入力

4

2 に答える 2

2

Firebug で確認すると、CSS はそれほど重要ではないため、CSS が RichFaces スタイルによってオーバーライドされていることに気付くでしょう。

これを変更する簡単な方法の 1 つは、id をh:formラッパーに設定し、それを CSS に追加することです。

<h:form id="myForm">
    <!-- code -->

    <rich:tabPanel>
        <!-- code -->
    </rich:tabPanel>

    <!-- code -->
</h:form>

そしてあなたの style.css ：

#myForm .rf-tab-hdr-spcr {
    /* your css */
}
于 2013-06-17T07:58:44.233 に答える
-1

のスタイル クラスは、rich:tabこちらのRichFaces3.x ガイドにあり、こちらのRichFaces4.xガイドにあります。

以下のスクリーン ショットで試したように、 (アクティブなタブのスタイル用rich-tab-active) とrich-tab-inactive(非アクティブなタブのスタイル用) をオーバーライドできます。

background-color黄色background-colorのアクティブなタブと赤色の非アクティブなタブの属性をオーバーライドしました。重要なのは removebackground-image属性です (スクリーン ショットで確認できます)。

JSP/XHTML ページで以下の CSS を試してください。

.rich-tab-active
{
  background-image : none;
  background-color: yellow;
}

リッチタブ

于 2013-06-17T08:03:20.270 に答える