0

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

4

4 回答 4

1

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

1. 使rich:simpleTogglePanelas 链接下的内容可点击。为此，您可以尝试以下代码。

<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>
于 2012-11-27T03:55:47.063 回答
1

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

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

于 2012-11-27T04:05:42.010 回答
0

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

于 2012-11-27T10:54:02.410 回答
0

首先，感谢您的回答！

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

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

于 2012-11-27T11:58:11.793 回答