0

rich:simpleTogglePanel のスタイルを、一般的なリンクのように変更したいと考えています。

http://livedemo.exadel.com/richfaces-demo/richfaces/simpleTogglePanel.jsf?c=simpleTogglePanel&tab=usage

このページは、私がやりたいことと、今得ていることを正確に示しています。すべての例の下にある「ソースを表示」リンクとまったく同じように見えることをしたいと思います。私が使用しているコードは、「クライアント スイッチ タイプ」の例と同じです。

 <rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
                    The switching between showing and hiding the toggle panel content
                    performs on the client side.
 </rich:simpleTogglePanel>

私の目標は、検索バーの下に「高度な検索」リンクを作成することです。パネルには、高度な検索コンテンツが含まれます。(余分なフィールド)

私は JSF 1.2 と Richfaces を使用しています。

4

4 に答える 4

1

私があなたの質問を正確に理解したかどうかはわかりません。あなたの質問を見ている2つの変種があります。

1。rich:simpleTogglePanelクリック可能なasリンクの下のコンテンツを作成します。このために、以下のコードを試すことができます。

<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">

<rich:dataGrid var="links" value="#{yourBean.linksList}" columns="6"      
     width="877px">

<h:commandLink actionListener="#{yourBean.someAction}">
</h:commandLink>

</rich:simpleTogglePanel>

2。rich:simpleTogglePanelヘッダーをリンクとして表示する場合

 <rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
               <f:facet name="header" >
                 <h:panelGroup>
                    <h:outputText value="yourLinkName" styleClass="linkClass">
                    </h:outputText>  
                 </h:panelGroup>
 </rich:simpleTogglePanel>

<style type="text/css">
 .linkClass{
 text-decoration: underline;
 }
</style>
于 2012-11-27T03:55:47.063 に答える
1

ボックスの開閉とスタイルを簡単に作成したい場合は、jQuery で作成するのが最善の方法です。RichFaces はすでに jQuery をロードしているため、次のように実行できます。

<a href="#" onclick="jQuery('#content').toggle();return false;">Your link</a>
<div id="content" style="display: none">Your content</div>

もちろん、RichFaces コンポーネントを使用できますが、多くの CSS クラスをオーバーライドするか、RichFaces スキンを無効にする必要があります。これにより、すべてのコンポーネントのスタイリングが無効になります。

EDIT :<a4j:loadScript src="resource://jquery.js"/>ビューで ajax コンポーネントを使用していない場合は、RichFaces に jQuery ライブラリを強制的にロードさせる必要があります。

于 2012-11-27T04:05:42.010 に答える
0

バーを非表示にしたい場合は、デフォルトの CSS をオーバーライドして、独自の CSS をいくつか追加する必要があります。

以下はコードです、

<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">

<f:facet name="closeMarker">
                                        <h:panelGroup styleClass="open">
                                            <h:outputText styleClass="yourClass" value="yourText"/>
                                        </h:panelGroup>
                                </f:facet>

</rich:simpleTogglePanel>

<style type="text/css">
.open {
background-color: white;
}
</style>

他の効果を実現するには、これらのデフォルト CSS をオーバーライドする必要があります。rich-stglpanel、rich-stglpanel-header、rich-stglpnl-marker など。

詳細については、RichFaces-SimpleTogglePanel ガイドを参照してください。

于 2012-11-27T10:54:02.410 に答える
0

まず、答えてくれてありがとう！

simpleTogglePanel を変更して、言及されたページのソース表示リンクのように見えるようにする方法を尋ねましたが、それは間違った方法であることがわかりました。

ah:commandLink: を使用して目標を達成しました。

<h:commandLink value="Advanced Search" action="#{MyBean.toggleHiddenPanel }" />

Bean のブール値を変更し、rendered 属性を使用して、必要なフィールドを表示/非表示にしました。

<h:panelGrid id="hiddenPanel" columns="4" >

                    <h:outputText value="date1:" rendered="#{MyBean.hiddenPanel}" />
                    <rich:calendar value="#{MyBean.date1}" rendered="#{MyBean.hiddenPanel}"
                        locale="US" popup="true" datePattern="d/M/yy HH:mm"
                        cellWidth="24px" cellHeight="22px" style="width:200px" />

                    <h:outputText value="date2:" rendered="#{MyBean.hiddenPanel}" />
                    <rich:calendar value="#{MyBean.date2}" locale="US" rendered="#{MyBean.hiddenPanel}"
                        popup="true" datePattern="d/M/yy HH:mm" cellWidth="24px"
                        cellHeight="22px" style="width:200px" />

                    <br />
                    <h:outputText value="Another field:" rendered="#{MyBean.hiddenPanel}" />

</h:panelGrid>

ps .: プロジェクトが機密であるため、変数の名前を変更しました

于 2012-11-27T11:58:11.793 に答える