Jsf 自定义链接，如rich:simpleTogglePanel

我想改变rich的风格：simpleTogglePanel看起来就像普通链接一样

这个页面显示了我现在想要做什么和得到什么。 我想做一些看起来完全像每个例子下面的“查看源代码”链接的事情。我使用的代码与“客户端交换机类型”示例中的代码相同：

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

我不确定我是否完全理解您的问题。有两种变体，我看到了你的问题

1

。将

丰富：simpleTogglePanel

下的内容设置为可单击的链接。 为此，您可以尝试下面的代码

---

如果您想要一个框的打开和关闭，并且可以轻松地设置它的样式，最好的方法是使用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使用

加载jQuery库。

如果要使该条消失，则必须覆盖默认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以实现其他效果。富stglpanel、富stglpanel标头、富stglpnl标记等

---

有关详细信息，请先参阅，谢谢您的回答

我问了一种方法来更改simpleTogglePanel，使其看起来像上面提到的页面中的view source链接，但我发现这是错误的方法

我使用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> 

---

注：我更改了变量的名称，因为该项目是保密的

2选项是我的意思，但我不想只是放置一些文本样式，使其看起来像一个链接。我试过你的方法，但似乎并没有让酒吧消失。我希望它看起来像查看源代码链接。（类似于在屏幕上打开一个大容器的小链接）感谢您的帮助！我没有尝试，但因为它会降低代码的“JSF性”。我想保持它从不必要的html清洁。谢谢你的回答！我不知道您可以从richfaces加载jQuery，也许我会在其他项目中使用它！再次感谢！

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