Question

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

Answer 1

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

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>

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

Answer 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

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

像rich：simpleTogglePanel这样的自定义链接

4 个答案: