像丰富的自定义链接：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

回答

相关问题