toggleswitch : demo page modify

input detail guide for toggle switch

Change-Id: I9d651e6cd62edf4ab0d6a84d6c35f896e6afe9b6

diff --git a/demos/tizen-winsets/widgets/switch/toggleswitch.html b/demos/tizen-winsets/widgets/switch/toggleswitch.html
index fcd7c67..6be30f0 100755 (executable)
--- a/demos/tizen-winsets/widgets/switch/toggleswitch.html
+++ b/demos/tizen-winsets/widgets/switch/toggleswitch.html
@@ -2,21 +2,38 @@
        <div data-role="header">
                <h1>ToggleSwitch</h1>
        </div>
+
        <div class="content" data-role="content">
+               <br>
                <label for="flip-1">1. Tizen normal switch:</label>
+               <br><br>
                <select name="flip-11" id="flip-11" data-role="slider">
                        <option value="off"></option>
                        <option value="on"></option>
                </select>
-               <br><br>
+               <br>
+               <p>Tizen UX toggle switch has image button for on/off.<br>
+                       To display image toggle switch, use jqueryMobile data-role="slider" <br>
+                       then remove text for option tag</p>
+               <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+                        add element's width to css file <br>
+                       &lt;select data-role="slider"&gt;<br>
+                       &nbsp;&lt;option value="off"&gt;&lt;/option&gt;<br>
+                       &nbsp;&lt;option value="on"&gt;&lt;/option&gt;<br>
+                       &lt;/select&gt;<br>
+               </p><br><br>
+
                <div data-role="fieldcontain">
-               <label for="flip-3">2. Text toggle switch:<br>
-                       (support when webDev. write text to option tag)</label>
+                       <label for="flip-3">2. Text toggle switch:</label>
+                       <br><br>
                        <select name="flip-3" id="flip-3" data-role="slider">
                                <option value="nope">Nope</option>
                                <option value="yep">Yep</option>
                        </select>
-               <div>
+                       <br>
+                       <p>To display jqm style swtich,<br>
+                               set text for option tag</p>
+               </div>
                <br><br>
 
                <div class ="containing-element">
@@ -33,6 +50,7 @@
                        &nbsp;}<br>
                </p>
        </div> <!-- /content -->
+
        <div data-role="footer">
        </div>
 </div> <!-- page -->