自定义链接如rich:simpleTogglePanel答案

【问题标题】：Custom link like rich:simpleTogglePanel自定义链接如rich:simpleTogglePanel
【发布时间】：2012-11-26 13:46:20
【问题描述】：

我想改变 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。

【问题讨论】：

标签： jsf richfaces jsf-1.2

【解决方案1】：

不确定我是否完全理解您的问题。您的问题有 2 个变体。

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 标头显示为链接

 <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>

【讨论】：

第二个选项是我的意思，但我不想仅仅放置一些文本样式使其看起来像一个链接。我试过你的方法，但它似乎并没有让酒吧消失。我希望它看起来像查看源链接。（类似于在屏幕中打开一个大容器的小链接）感谢您的帮助！

【解决方案2】：

如果您想要一个盒子打开和关闭并轻松设置样式，最好的方法是使用 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 皮肤，这将禁用每个组件的样式。

编辑：如果您没有在视图中使用任何 ajax 组件，则必须强制 RichFaces 使用 <a4j:loadScript src="resource://jquery.js"/> 加载 jQuery 库。

【讨论】：

我没有尝试过，但因为它会降低我的代码的“JSFness”。我想让它远离不必要的 html。感谢您的回答！我不知道你可以从 Richfaces 加载 jQuery，也许我会在其他项目中使用它！再次感谢！

【解决方案3】：

如果你想让栏消失，你必须覆盖默认的 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 guide

【讨论】：

【解决方案4】：

首先，感谢您的回答！

我要求一种方法来更改 simpleTogglePanel，使其看起来像提到的页面中的查看源链接，但我发现这是错误的方法。

我使用 h:commandLink 实现了我的目标：

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

更改我的 bean 中的布尔值并使用渲染属性来显示/隐藏我需要的字段：

<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.：我改了变量的名字，因为项目是保密的

【讨论】：