Flip Switch

compared with
Current by Philip Breau
on Jan 17, 2013 16:10.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 5 changes. View first change.

 h3. flipSwitch
  h3. flipswitch
  
The flipSwitch component displays a command button that toggles between an On and Off state. This UI element is common on the iOS platform for toggling a setting on or off. This component generates server side action event when pressed.  SingleSubmit = "true" means that the button will submit itself and render the page with whatever has changed (typicaly ICEfaces 2.0 singleSubmit behaviour). This component is also supported by the mobi:ajax tag for more options on ajax support.
  The flipswitch component displays a command button that toggles between an On and Off state. This UI element is common on the iOS platform for toggling a setting on or off. This component generates server side action event when pressed.  SingleSubmit = "true" means that the button will submit itself and render the page with whatever has changed (typicaly ICEfaces 2.0 singleSubmit behaviour). This component is also supported by the mobi:ajax tag for more options on ajax support.
  
  
 {note}{*}SingleSubmit =* false means the state of the button stays on the client until the form is submitted with some other component (typically a submit button).{note}
  
 h3. Usage
  
 * singleSubmit = "false" .  The value stays on the client until form submission. (this is the default)
  
 {code:xml}
 <h:outputLabel for="cor" value="Auto-Correction"/>
<mobi:flipSwitch id="cor" style="float:right"
  <mobi:flipswitch id="cor" style="float:right"
  labelOn="ON" labelOff="OFF"
  value="#{flipSwitchBean.autoCorrection}"/>
 {code}
  
 * singleSubmit = "true" .&nbsp; The value is submitted immediately to the server and any page markup that changes as a result is re-rendered.
  
 {code:xml}
 <h:outputLabel for="cor" value="Auto-Correction"/>
<mobi:flipSwitch id="cor" style="float:right" singleSubmit="true"
  <mobi:flipswitch id="cor" style="float:right" singleSubmit="true"
  labelOn="ON" labelOff="OFF"
  value="#{flipSwitchBean.autoCorrection}"/>
 {code}
  
 h3. Theming
  
 FlipSwitch supports device theming by providing default styles for Apple, Android and Blackberry.&nbsp; CSS class names are as follows:
 * mobi-flip-switch (mobi-flip-switch-off \| mobi-flip-switch-off)
 ** mobi-flip-switch-txt
  
 h3. Tag Documentation
  h3. Component Documentation
 [flipswitch|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/flipswitch.html]

© Copyright 2016 ICEsoft Technologies Canada Corp.