demos/tizen-winsets/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         <div class="content" data-role="content">
   6                 <label for="flip-1">1. Tizen normal switch:</label>
   7                 <select name="flip-11" id="flip-11" data-role="slider">
   8                         <option value="off"></option>
   9                         <option value="on"></option>
  10                 </select>
  11                 <br><br>
  12
  13                 <div data-role="fieldcontain">
  14                 <label for="flip-3">2. Text toggle switch:<br>
  15                         (support when webDev. write text to option tag)</label>
  16                         <select name="flip-3" id="flip-3" data-role="slider">
  17                                 <option value="nope">Nope</option>
  18                                 <option value="yep">Yep</option>
  19                         </select>
  20                 <div>
  21                 <br><br>
  22
  23                 <div class ="containing-element">
  24                         <label for="flip-2">Text toggle switch: set element width</label>
  25                         <select name="flip-2" id="flip-2" data-role="slider">
  26                                 <option value="off">Long toggle off</option>
  27                                 <option value="on">Long toggle on</option>
  28                         </select>
  29                 </div>
  30                 <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  31                          add element's width to css file <br>
  32                         &nbsp;.containing-element .ui-slider-switch { <br>
  33                         &nbsp&nbsp;width : 9em;<br>
  34                         &nbsp;}<br>
  35                 </p>
  36
  37         </div> <!-- /content -->
  38         <div data-role="footer">
  39         </div>
  40 </div> <!-- page -->