widgets/switch/toggleswitch.html

   1 <div data-role="page" id="switch-demo" data-add-back-btn="true">
   2         <div data-role="header">
   3                 <h1>ToggleSwitch</h1>
   4         </div>
   5
   6         <div class="content" data-role="content">
   7                 <br>
   8                 <label for="flip-1">1. Tizen normal switch:</label>
   9                 <br><br>
  10                 <select name="flip-11" id="flip-11" data-role="slider">
  11                         <option value="off"></option>
  12                         <option value="on"></option>
  13                 </select>
  14                 <br>
  15                 <p>Tizen UX toggle switch has image button for on/off.<br>
  16                         To display image toggle switch, use jqueryMobile data-role="slider" <br>
  17                         then remove text for option tag</p>
  18                 <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  19                          add element's width to css file <br>
  20                         &lt;select data-role="slider"&gt;<br>
  21                         &nbsp;&lt;option value="off"&gt;&lt;/option&gt;<br>
  22                         &nbsp;&lt;option value="on"&gt;&lt;/option&gt;<br>
  23                         &lt;/select&gt;<br>
  24                 </p><br><br>
  25
  26                 <div data-role="fieldcontain">
  27                         <label for="flip-3">2. Text toggle switch:</label>
  28                         <br><br>
  29                         <select name="flip-3" id="flip-3" data-role="slider">
  30                                 <option value="nope">Nope</option>
  31                                 <option value="yep">Yep</option>
  32                         </select>
  33                         <br>
  34                         <p>To display jqm style swtich,<br>
  35                                 set text for option tag</p>
  36                 </div>
  37                 <br><br>
  38
  39                 <div class ="containing-element">
  40                         <label for="flip-2">Text toggle switch: set element width</label>
  41                         <select name="flip-2" id="flip-2" data-role="slider">
  42                                 <option value="off">Long toggle off</option>
  43                                 <option value="on">Long toggle on</option>
  44                         </select>
  45                 </div>
  46                 <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  47                          add element's width to css file <br>
  48                         &nbsp;.containing-element .ui-slider-switch { <br>
  49                         &nbsp&nbsp;width : 9em;<br>
  50                         &nbsp;}<br>
  51                 </p>
  52         </div> <!-- /content -->
  53
  54         <div data-role="footer">
  55         </div>
  56 </div> <!-- page -->