像豐富的自定義鏈接：simpleTogglePanel

我想改變富人的風格：simpleTogglePanel看起來像一個普通的鏈接。像豐富的自定義鏈接：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。

來源

2012-11-26 Antonio Vildes Barbosa

首先，非常感謝！

我問了一個方法來改變simpleTogglePanel，所以它看起來像提到的頁面中的視圖源鏈接，但我發現這是錯誤的路要走。

我用啊達到我的目標：commandLink：

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

改變我的豆一個布爾值和所使用的渲染屬性來顯示/隱藏我所需要的字段：

<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-27 11:58:11

我不確定我是否完全理解你的問題。有兩種變體可以看到你的問題。

1。將rich:simpleTogglePanel下的內容作爲可點擊的鏈接。爲此，您可以嘗試下面的代碼。

<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頁眉如果你想要一個盒子開通和關閉和風格很容易，最好的辦法是使用jQuery使它被顯示爲鏈接

<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-27 03:55:47

第二個選項是我的意思，但我不希望只是將一些文本樣式，使它看起來像一個鏈接。我試過你的方式，但似乎並沒有讓酒吧消失。我希望它看起來像查看源代碼鏈接。（有點像一個小環節，在屏幕上打開一個大容器）謝謝您的幫助！ –

。作爲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的皮膚，這將禁用的造型每一個部件。

編輯：你必須強迫RichFaces的，如果你不使用視圖任何Ajax組件與<a4j:loadScript src="resource://jquery.js"/>加載jQuery庫。

來源

2012-11-27 04:05:42

我沒有嘗試，但因爲它會降低我的代碼「JSFness」。我想保持它的清潔不必要的HTML。感謝您的回答！我不知道，你可以從RichFaces的加載jQuery的，也許我會在另一個項目中使用它！再次感謝！ –

如果你想讓條消失，你必須重寫默認的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來實現你的其他影響。富stglpanel，富stglpanel頭，富stglpnl標誌物等

有關詳細信息，請參閱您的答案RichFaces-SimpleTogglePanel guide

來源

2012-11-27 10:54:02

像豐富的自定義鏈接：simpleTogglePanel

回答

相關問題