CollapsiblePanelComponent Class

A ViewComponent that renders a collapsible panel. [ViewComponentDetails("CollapsiblePanel", Sections = "body,caption")]
public class CollapsiblePanelComponent

Remarks

CollapsiblePanelViewComponent is a blockcomponent with two section and 12 parameters.

Parameter	Description
id	string, required. Unique identifer for this control.
expandImagePath	string, optional. Path to image for "Click to Expand" link. Both expandImagePath & collapseImagePath must be given together. If either is missing, uses text link instead on image.
collapseImagePath	string, optional. Path to image for "Click to Collapse" link. Both expandImagePath and collapseImagePath must be given together. If either is missing, uses text link instead on image.
expandLinkText	string, optional. Text use for "Click to Expand" link. Defaults to "Show".
collapseLinkText	string, optional. Text use for "Click to Collapse" link. Defaults to "Hide".
caption	string, optional. Text use for in the caption of the panel. May alsoo be specified in the "Caption" section. (section take precedence over parameter)
cssClass	string, optional. CSS Class assigned to panel. Defaults to "collapsiblePanel".
style	string, optional. Extra inline stylesheet items that may be added to the panel.
collapsed	boolean, optional. Specifies whether the panel should be initially collapsed. Defaults to false.
effect	string, optional. The style of effect to use to open and close the panel. Defaults to "slide". Note, only implemented when using prototype library. under jQuery, "slide" is always iused.
effectDuration	float, optional. The length of time used to create the opening effect. Defaults to .3 seconds.
toggleOnClickHeader	boolean, optional. Specifies if the panel header (caption) itself should be the link to open and close the panel, rather than a specific link or image (defaults to false).
JSLibrary	string, optional. Specifed which Javascript library to use. Presently only "prototype" and "jquery" are implemented. Defaults to value in jslibraries.xml, if present, or "prototype".
Section	Description
body	Specifies the body of the panel which is to be hidden and revealed. Optional, but the control is rather pointless unless specified.
caption	Specifies the text for the panel header. May alternately be specifed in the 'caption' parameter.

Example

#blockcomponent(CollapsiblePanel with "id=ColumnComponent"
                "expandImagePath=/Images/expand.jpg"
                "collapseImagePath=/Images/collapse.jpg"
                "collapsed=true")
#caption
Columns component
#end
#body
    <a href="/columns/index.rails">Basic Usage</a>
#end
#end

will generate Htmll like this:

<div id='ColumnComponent' class='collapsiblePanel'>
<div class='header'>
<table><tr><td>
  <img id='ColumnComponentToggle' src='/Images/expand.jpg' class='toggleImage'
      onclick='javascript:expandCollapse(ColumnComponentOpts)'
      alt='Show' title='Click to expand/collapse'/>
  </td>
  <td class='caption'><h3>Columns component</h3></td>
</tr></table>
</div>
<div id='ColumnComponentBody' class='body'style='display:none'>
    <a href="/columns/index.rails">Basic Usage</a>
</div></div>
<script type="text/javascript">
var ColumnComponentOpts = {controlName: 'ColumnComponentBody', togglerName: 'ColumnComponentToggle', collapseImagePath:'/Images/collapse.jpg', expandImagePath:'/Images/expand.jpg'};
</script>

Page Operations

Browse Space

CollapsiblePanelComponent Class

Remarks

Example