How to use <apex:toolbar> in Visualforce Page?
<apex:toolbar> :A stylized, horizontal toolbar that can contain any number of child components. By default, all child components are aligned to the left side of the toolbar. Use an
<apex:toolbarGroup> component to align one or more child components to the right.
This tag supports following attributes:
Attribute
|
Description
|
contentClass
|
The style class used to display each child component in the toolbar, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
|
contentStyle
|
The style used to display each child component in the toolbar, used primarily for adding inline CSS styles.
|
height
|
The height of the toolbar, expressed as a relative percentage of the total height of the screen (for example, height="5%") or as an absolute number of pixels (for example, height="10px"). If not specified, this value defaults to the height of the tallest component.
|
id
|
An identifier that allows the toolbar component to be referenced by other components in the page.
|
itemSeparator
|
The symbol used to separate toolbar components. Possible values include "none", "line", "square", "disc", and "grid". If not specified, this value defaults to "none".
|
onclick
|
The JavaScript invoked if the onclick event occurs that is, if the user clicks the toolbar.
|
ondblclick
|
The JavaScript invoked if the ondblclick event occurs that is, if the user clicks the toolbar twice.
|
onitemclick
|
The JavaScript invoked if the user clicks on a component in the toolbar that is not in a toolbarGroup component.
|
onitemdblclick
|
The JavaScript invoked if the user clicks twice on a component in the toolbar that is not in a toolbarGroup component.
|
onitemkeydown
|
The JavaScript invoked if the user presses a keyboard key on a component in the toolbar that is not in a toolbarGroup component.
|
onitemkeypress
|
The JavaScript invoked if the user presses or holds down a keyboard key on an item in the toolbar that is not in a toolbarGroup component.
|
onitemkeyup
|
The JavaScript invoked if the user releases a keyboard key on an item in the toolbar that is not in a toolbarGroup component.
|
onitemmousedown
|
The JavaScript invoked if the user clicks a mouse button on an item in the toolbar that is not in a toolbarGroup component.
|
onitemmousemove
|
The JavaScript invoked if the user moves the mouse pointer while focused on an item in the toolbar that is not in a toolbarGroup component.
|
onitemmouseout
|
The JavaScript invoked if the user moves the mouse pointer away from the an item in the toolbar that is not in a toolbarGroup component.
|
onitemmouseover
|
The JavaScript invoked if the user moves the mouse pointer over an item in the toolbar that is not in a toolbarGroup component.
|
onitemmouseup
|
The JavaScript invoked if the user releases a mouse button on an item in the toolbar that is not in a toolbarGroup component.
|
onkeydown
|
The JavaScript invoked if the onkeydown event occurs that is, if the user presses a keyboard key.
|
onkeypress
|
The JavaScript invoked if the onkeypress event occurs that is, if the user presses or holds down a keyboard key.
|
onkeyup
|
The JavaScript invoked if the onkeyup event occurs that is, if the user releases a keyboard key.
|
onmousedown
|
The JavaScript invoked if the onmousedown event occurs that is, if the user clicks a mouse button.
|
onmousemove
|
The JavaScript invoked if the onmousemove event occurs that is, if the user moves the mouse pointer.
|
onmouseout
|
The JavaScript invoked if the onmouseout event occurs that is, if the user moves the mouse pointer away from the toolbar.
|
onmouseover
|
he JavaScript invoked if the onmouseover event occurs that is, if the user moves the mouse pointer over the toolbar.
|
onmouseup
|
The JavaScript invoked if the onmouseup event occurs that is, if the user releases the mouse button.
|
rendered
|
A Boolean value that specifies whether the toolbar is rendered on the page. If not specified, this value defaults to true.
|
separatorClass
|
The style class used to display the toolbar component separator, used primarily to designate which CSS styles are applied when using an external CSS stylesheet. See also the itemSeparator attribute.
|
style
|
The style used to display the toolbar, used primarily for adding inline CSS styles.
|
styleClass
|
The style class used to display the toolbar, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.
|
width
|
The width of the toolbar, expressed as a relative percentage of the total width of the screen (for example, width="5%") or as an absolute number of pixels (for example, width="10px"). If not specified, this value defaults to 100%.
|
<apex:page id="thePage">
<apex:toolbar id="theToolbar">
<apex:outputText value="Sample Toolbar"/>
<apex:toolbarGroup itemSeparator="line" id="toobarGroupLinks">
<apex:outputLink value="http://www.salesforce.com">salesforce </apex:outputLink>
<apex:outputLink value="http://developer.salesforce.com">apex developer network </apex:outputLink>
</apex:toolbarGroup>
<apex:toolbarGroup itemSeparator="line" location="right" id="toobarGroupForm">
<apex:form id="theForm">
<apex:inputText id="theInputText">Enter Text</apex:inputText>
<apex:commandLink value="search" id="theCommandLink"/>
</apex:form>
</apex:toolbarGroup>
</apex:toolbar>
</apex:page>
No comments:
Post a Comment