1 <div data-role="page" id="switch-demo" data-add-back-btn="true">
2 <div data-role="header">
6 <div class="content" data-role="content">
8 <label for="flip-1">1. Tizen normal switch:</label>
10 <select name="flip-11" id="flip-11" data-role="slider">
11 <option value="off"></option>
12 <option value="on"></option>
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 <select data-role="slider"><br>
21 <option value="off"></option><br>
22 <option value="on"></option><br>
26 <div data-role="fieldcontain">
27 <label for="flip-3">2. Text toggle switch:</label>
29 <select name="flip-3" id="flip-3" data-role="slider">
30 <option value="nope">Nope</option>
31 <option value="yep">Yep</option>
34 <p>To display jqm style swtich,<br>
35 set text for option tag</p>
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>
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 .containing-element .ui-slider-switch { <br>
49   width : 9em;<br>
52 </div> <!-- /content -->
54 <div data-role="footer">