Friday, June 20, 2014

How to use apex:panelBarItem in Visualforce Page?

How to use <apex:panelBarItem>  in Visualforce Page?

<apex:panelBarItem> :
A section of an < apex:panelBar > that can expand or retract when a user clicks the section header. When expanded, the header and the content of the < apex:panelBarItem > is displayed. When retracted, only the header of the < apex:panelBarItem > displays. 

This tag supports following attributes:
Attribute
Description
contentClass
The style class used to display the content of the panelBarItem component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
contentStyle
The style used to display the content of the panelBarItem component, used primarily for adding inline CSS styles.
expanded
A Boolean value that specifies whether the content of this panelBarItem is displayed.
headerClass
The style class used to display the header of the panelBarItem component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
headerClassActive
The style class used to display the header of the panelBarItem component when the content of the panelBarItem is displayed, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
headerStyle
The style used to display the header of the panelBarItem component, used primarily for adding inline CSS styles.
headerStyleActive
The style used to display the header of the panelBarItem component when the content of the panelBarItem is displayed, used primarily for adding inline CSS styles.
id
An identifier that allows the panelBarItem to be referenced by other components in the page.
label
The text displayed as the header of the panelBarItem component.
name
The name of the panelBarItem. Use the value of this attribute to specify the default expanded panelItem for the panelBar.
onenter
The JavaScript invoked when the panelBarItem is not selected and the user clicks on the component to select it.
onleave
The JavaScript invoked when the user selects a different panelBarItem.
rendered
A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.


Visualforce Example:

<apex:page >
  <apex:pageMessages />
  <apex:panelBar >
    <apex:panelBarItem label="Item One" onenter="alert('Entering item one');" onleave="alert('Leaving item one');">
      Item one content
    </apex:panelBarItem>
    <apex:panelBarItem label="Item Two" onenter="alert('Entering item two');" onleave="alert('Leaving item two');">
      Item two content
    </apex:panelBarItem>
  </apex:panelBar>
</apex:page>


save image





0 comments:

Post a Comment

 
| ,