|
Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Layout, Views, Menus, Lists, and Controls >
Adding Toggle Controls
This topic describes how to add a toggle control that allows the user to toggle between displaying or hiding content in landscape or portrait layout. To add toggle controls
- Identify the .swt file that you must modify, and then open it for editing.
For a similar example that identifies and modifies a web template, see Configuring Views to Use Landscape or Portrait Layout.
- Add a div element to the Web template file that you identified in Step 1.
For more information, see Attributes That You Can Use with the Div Element for a Toggle Control.
For example, the following code sets the display options for the back button that the jqmToggleCtrl control renders. It slides the element out of the viewport toward the right when the toggle displays the control, and it slides the element out of the viewport toward the left when the toggle hides the control:
<div name="jqmToggleCtrl" id="jqmToggleCtrl" ctrltype="button" ctrllabel="IDS_SWE_MOBILE_BACK" effect="slide" showoptions="{'direction': 'right'}" hideoptions="{'direction': 'left'}" style="display:none;"></div>
For another example, the following code sets the display options for the back button that the jqmToggleCtrl control renders. It displays the element at 100% opacity when the toggle displays the control, and it displays the element at 0% opacity when the toggle hides the control:
<div name="jqmToggleCtrl" id="jqmToggleCtrl" ctrltype="button" ctrllabel="IDS_SWE_MOBILE_BACK" effect="size" showoptions="{'percent': '100'}" hideoptions="{'percent': '0'}" style="display:none;"></div>
Attributes That You Can Use with the Div Element for a Toggle Control
Table 21 describes the attributes that you can use with the div element that determines how to display a toggle control.
Table 21. Attributes That You Can Use with the Div Element for a Toggle Control
|
|
id |
You set each of these attributes to the following value: jqmToggleCtrl
Script in the client examines these attributes when it creates the control. |
name |
ctrltype |
You set this attribute to one of the following values:
|
ctrllabel |
Sets the display label for the control. You set the value for this attribute to the key of the localized string value that the swemessage_xxx.js file contains. |
style |
Sets the default visibility for the control. You set this attribute to the following value: display:none;
|
effect |
Sets the animation effect that Siebel Open UI uses when the user clicks the toggle control. If you do not specify a value for this attribute, then Siebel Open UI uses no affect. You can use one of the following values:
- blind
- clip
- drop
- explode
- fold
- puff
- slide
- scale
- size
- pulsate
For more information, see the page about user interface effects at the jQuery Web site at http://docs.jquery.com/UI/Effects/. |
showoptions |
Sets the display options for the effect. If you do not include showoptions, then Siebel Open UI sends empty options to the show method and uses the default that jQuery uses. You can use a pair of single quotation marks to enclose the value instead of the double quotation marks that JSON syntax requires. Siebel Open UI replaces these single quotation marks with double quotation marks so that showoptions complies with JSON. For more information, see the JSON Web site at http://www.json.org. For more information, see Example Show and Hide Options. |
hideoptions |
Behavior is the same as the behavior for the showoptions attribute, except hideoptions sets the hide options for the effect. |
Example Show and Hide Options
The following code includes examples of the showoptions and hideoptions attributes: effect="clip" showoptions="{'direction': 'horizontal'} hideoptions="{'direction': 'vertical'}"
effect="slide" showoptions="{'direction': 'left'} hideoptions="{'direction': 'right'}"
effect="scale" showoptions="{'percent': 100} hideoptions="{'percent': 0}"
effect="size" showoptions="{'to' : {'width': 280, 'height': 185}}"
hideoptions="{'to' : {'width': 280, 'height': 185}}"
|
