<p>The progress component shows that an operation is in progress.</p>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component is supported since Tizen 2.4.</td>
+ </tr>
+ <tr>
+ <td class="note"><i>deprecated</i> Progress and ProgressBar component has been merged and renamed to <i>new</i> <strong>Progress.</strong></td>
+ </tr>
+ </tbody>
+</table>
+
+
<h2>Table of Contents</h2>
<ol class="toc">
-
<li><a href="#default-selectors0.9354383451864123">Default Selectors</a>
</li>
-
+ <li><a href="#html-examples0.866303835529834">HTML Examples</a>
+
+ </li>
<li><a href="#manual-constructor0.3267326701898128">Manual Constructor</a>
-
+
</li>
- <li><a href="#html-examples0.866303835529834">HTML Examples</a>
- </li>
<li><a href="#options-for widget0.13800429017283022">Options</a>
-
+ </li>
<li><a href="#methods0.7043644052464515">Methods</a>
-
+
</li>
-
-
</ol>
<h2><a id="default-selectors0.9354383451864123"></a>Default Selectors</h2>
-<p>By default, all elements with the <code>data-role="progress"</code> attribute are displayed as progress components.</p>
+<p>By default, all elements with the <code>class="ui-progress"</code> or <code>data-role="progress"</code> attribute are displayed as progress components.</p>
+<h2><a id="html-examples0.866303835529834"></a>HTML Examples</h2>
-<h2><a id="manual-constructor0.3267326701898128"></a>Manual Constructor</h2>
+<h4>progressbar type</h4>
-<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace:</p>
+<pre class="prettyprint">
+<div class="ui-progress" data-type="progressbar"></div>
+</pre>
-<pre class="prettyprint"><div id="progress"></div>
-<script>
- var element = document.getElementById("progress"),
- progress = tau.widget.Progress(element);
-</script>
+<h4>activitybar type</h4>
+
+<pre class="prettyprint">
+<div class="ui-progress" data-type="activitybar"></div>
</pre>
-<p>The constructor requires an <code>HTMLElement</code> parameter to create the component, and you can get it with the <code>document.getElementById()</code> method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.</p>
+<h4>progresscircle type</h4>
+
+<pre class="prettyprint">
+<div class="ui-progress" data-type="progresscircle"></div>
+</pre>
-<p>If the jQuery library is loaded, you can use its method:</p>
+<h4>activitycircle type</h4>
-<pre class="prettyprint"><div id="progress"></div>
-<script>
- $("#progress").progress();
-</script>
+<pre class="prettyprint">
+<div class="ui-progress" data-type="activitycircle"></div>
</pre>
-<h2><a id="html-examples0.866303835529834"></a>HTML Examples</h2>
-<p>To create a simple progress component:</p>
-<pre class="prettyprint"><div id="progress" data-role="progress"></div>
+<h2><a id="manual-constructor0.3267326701898128"></a>Manual Constructor</h2>
+
+<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace:</p>
+
+<pre class="prettyprint"><div id="progress"></div>
+<script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element, {type : "progressbar"});
+</script>
</pre>
+
<h2><a id="options-for widget0.13800429017283022"></a>Options</h2>
-<p>The options for a component can be defined as <code>data-...</code> attributes or passed as parameters to the constructor.</p>
+<p>The options for a component can be defined as <code>data</code> attributes or passed as parameters to the constructor.</p>
<p>You can change an option for the component using the <code>option</code> method.</p>
<tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-running</span></td>
- <td class="option">boolean</td>
- <td class="option">true</td>
- <td class="option">Sets whether the progress component is running.</td>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-type</span></td>
+ <td class="option">"progressbar" | "progresscircle" |<br>
+ "activitybar" | "activitycircle"</td>
+ <td class="option">"progressbar"</td>
+ <td class="option">Sets type of progress component.</td>
</tr>
<tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>
- <td class="option">"circle" | "pending"</td>
- <td class="option">"pending"</td>
- <td class="option"><p>Object with the default options.</p></td>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-value</span></td>
+ <td class="option">Number</td>
+ <td class="option">0</td>
+ <td class="option">Sets default value or progress component.</td>
</tr>
</tbody>
<h2><a id="methods0.7043644052464515"></a>Methods</h2>
-<p>To call a method on the component, use one of the existing APIs:</p>
-
-<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
+<p>To call a method on the component, please refer the following example:</p>
<pre class="prettyprint"><div id="progress"></div>
<script>
// progress.methodName(argument1, argument2, ...);
// For example
- progress.show();
-</script>
-</pre></li>
-
-<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint"><div id="progress"></div>
-<script>
- $("#progress").progress();
-
- // $(".selector").progress("methodName", argument1, argument2, ...);
- // For example
- $("#progress").progress("show");
+ progress.refresh();
</script>
</pre>
-</li></ul>
<h3>Summary</h3>
<table class="informaltable">
<tr>
<td>
- <pre class="intable prettyprint"><a href="#method-hide">hide</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-disable">disable</a> ( ) </pre>
</td>
- <td><p>Hides the component.</p></td>
+ <td><p>Disable Progress component.</p></td>
</tr>
-
-
-
-
+
<tr>
<td>
- <pre class="intable prettyprint">Progress <a href="#method-refresh">refresh</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-enable">enable</a> ( ) </pre>
</td>
- <td><p>Refreshes the progress.</p></td>
+ <td><p>Enable Progress component.</p></td>
</tr>
-
-
-
+
<tr>
<td>
- <pre class="intable prettyprint"><a href="#method-running">running</a> ( boolean flag ) </pre>
+ <pre class="intable prettyprint"><a href="#method-value">value</a> ( ) </pre>
</td>
- <td><p>Starts or stops running the progress.</p></td>
+ <td><p>Sets or gets value of Progress component.</p></td>
</tr>
-
-
-
+
<tr>
<td>
- <pre class="intable prettyprint"><a href="#method-show">show</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-option">option</a> ( ) </pre>
</td>
- <td><p>Shows the component.</p></td>
+ <td><p>Sets or gets options of Progress component.</p></td>
</tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-refresh">refresh</a> ( ) </pre>
+ </td>
+ <td><p>Refreshes the Progress DOM.</p></td>
+ </tr>
-
+
</tbody>
</table>
<dl>
-
<dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-hide">hide</span></b></code></dt>
+ id="method-disable">disable</span></b></code></dt>
<dd>
<div class="brief">
- <p>Hides the component.</p>
+ <p>Disable Progress component.</p>
</div>
<div class="synopsis">
- <pre class="signature prettyprint">hide ( ) </pre>
+ <pre class="signature prettyprint">disable ( ) </pre>
</div>
-
<div class="description">
<p>
-
</p>
</div>
-
-
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
-
- No return value
-
- </div>
- <div class="example">
- <span class="example"><p>Code
- example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- var element = document.getElementById("progress"),
- progressWidget = tau.widget.Progress(element);
- progressWidget.hide();
-</script>
-</pre>
- </div>
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- $("#progress").progress();
- $("#progress").progress("hide");
-</script>
-</pre>
- </div>
-
- </dd>
-
-
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-refresh">refresh</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Refreshes the progress.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">Progress refresh ( ) </pre>
- </div>
-
- <div class="description">
- <p>
-
-<p>The method rebuilds the DOM structure of the progress component. It must be called after you manually change the HTML attributes of the component's DOM structure.</p>
-<p>The method is called automatically after any component option is changed.</p>
-
- </p>
- </div>
-
-
-
<div class="returntype">
<p><span class="return">Return value:</span></p>
-
- <table>
- <tbody>
- <tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>Progress</td>
- <td>Returns this.</td>
- </tr>
- </tbody>
- </table>
-
-
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Progress</td>
+ <td>Returns this.</td>
+ </tr>
+ </tbody>
+ </table>
</div>
<div class="example">
<span class="example"><p>Code
- example
(TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-$("#progress").progress();
-<div id="progress"></div>
-<script>
- var element = document.getElementById("progress"),
- progressWidget = tau.widget.Progress(element);
-
- progressWidget.refresh();
+ prettyprint"><script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element);
- // Is also called after
- progressWidget.option("running", true);
-</script>
-</pre>
- </div>
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- $("#progress").progress();
- $("#progress").progress("refresh");
+ progress.disable();
</script>
</pre>
</div>
-
+
</dd>
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-running">running</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Starts or stops running the progress.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">running ( boolean flag) </pre>
- </div>
-
- <div class="description">
- <p>
-
- </p>
- </div>
-
- <div class="parameters">
- <p><span class="param">Parameters:</span></p>
- <table>
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-enable">enable</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Enable Progress component.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">enable ( ) </pre>
+ </div>
+ <div class="description">
+ <p>
+ </p>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+ <table>
<tbody>
<tr>
- <th>Parameter</th>
<th>Type</th>
- <th>Required/optional</th>
- <th>Default value</th>
<th>Description</th>
</tr>
-
-
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">flag</span></td>
- <td>boolean</td>
- <td>Required</td>
- <td></td>
- <td>If <code>true</code>, the progress component is set to run.</td>
+ <td>Progress</td>
+ <td>Returns this.</td>
</tr>
-
-
</tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
- No return value
-
-
- </div>
- <div class="example">
- <span class="example"><p>Code example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ </table>
+ </div>
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- var element = document.getElementById("progress"),
- progressWidget = tau.widget.Progress(element),
- // Return current state of running
- value = progressWidget.running();
+ prettyprint"><script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element);
- progressWidget.running(true); // Starts running
-
- progressWidget.running(false); // Stops running
+ progress.enable();
</script>
</pre>
- </div>
- <div class="example">
+ </div>
+
+ </dd>
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-value">value</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Sets or gets value of Progress component.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">value ( Number value ) </pre>
+ </div>
+ <div class="description">
+ <br>
+ When this method has no parameter, it returns Progress value.<br>
+ If you call value with new number, you don't need to call refresh() method because it calls automatically.
+ </p>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Number</td>
+ <td>Returns value of Progress.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="example">
<span class="example"><p>Code
- example
(jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- $("#progress").progress();
+ prettyprint"><script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element),
+ originValue;
- // Return current state of running
- $("#progress").progress("running");
+ // Get the origin value of progress
+ originValue = progress.value();
+ console.log(originValue);
- // Starts running
- $("#progress").progress("running", true);
-
- // Stops running
- $("#progress").progress("running", false);
+ // sets the value of progress to 70
+ progress.value(70);
</script>
</pre>
- </div>
-
- </dd>
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-show">show</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Shows the component.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">show ( ) </pre>
- </div>
-
- <div class="description">
- <p>
-
- </p>
- </div>
-
-
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
-
- No return value
-
- </div>
- <div class="example">
+ </div>
+
+ </dd>
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-option">option</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Sets or gets options of Progress component.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">option ( ) </pre>
+ </div>
+ <div class="description">
+ <p>
+ When changing value option of progress, we recommend to use value() method.
+ </p>
+ </div>
+
+ <div class="example">
<span class="example"><p>Code
- example
(TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- var element = document.getElementById("progress"),
- progressWidget = tau.widget.Progress(element);
-
- progressWidget.show();
+ prettyprint"><script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element),
+ type;
+
+ progress.option("value", 50);
+ // After change option, please call refresh method.
+ progress.refresh();
+
+ // Gets type option value
+ type = progress.option("type");
+ console.log(type);
</script>
</pre>
- </div>
- <div class="example">
+ </div>
+
+ </dd>
+
+ <dt class="method" id="addidp28072"><code><b><span class="methodName"
+ id="method-refresh">refresh</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Refresh Progress DOM.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">refresh ( ) </pre>
+ </div>
+ <div class="description">
+ <p>
+ </p>
+ </div>
+
+ <div class="example">
<span class="example"><p>Code
- example
(jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<div id="progress"></div>
-<script>
- $("#progress").progress();
- $("#progress").progress("show");
+ prettyprint"><script>
+ var element = document.getElementById("progress"),
+ progress = tau.widget.Progress(element);
+
+ // Change DOM dynamically or change option
+ progress.refresh();
</script>
</pre>
- </div>
-
- </dd>
-
-
-
+ </div>
+
+ </dd>
+
+
</dl>
<h1>Toggle Switch</h1>
-<p>The flip toggle switch component is a common UI element on mobile devices, used for binary on/off or true/false data input.</p>
+<p>The ToggleSwitch component is used as 2-state switch for on/off or true/false data input.</p>
-<p>The flip toggle switch component shows a 2-state switch on the screen. If defined with a <code>select</code> element type with <code>option</code> element, the toggles can have labels. You can drag or flip the handle, or tap one side of the switch.</p>
-
-<p>Toggles defined with the <code>select</code> element are supported for backward compatibility.</p>
<h2>Table of Contents</h2>
<ol class="toc">
<li><a href="#default-selectors">Default Selectors</a>
</li>
-
- <li><a href="#manual-constructor">Manual Constructor</a>
-
- </li>
+ <li><a href="#html-examples">HTML Example</a>
+
+ </li>
- <li><a href="#options-list">Options</a>
+ <li><a href="#manual-constructor">Manual Constructor</a>
</li>
<h2><a id="default-selectors"></a>Default Selectors</h2>
-<p>By default, all <code>input</code> elements with the <code>data-role="toggleswitch"</code> attribute or the <code>select</code> elements with the <code>data-role="slider"</code> or <code>data-role="toggleswitch"</code> attribute are displayed as toggle switches.</p>
-
-<p>To add a toggle switch component to the application:</p>
-
+<p>By default, all <code>input</code> elements with the <code>class="ui-toggleswitch"</code> or <code>data-role="toggleswitch"</code> are displayed as toggle switches.
+<br>Additionally, <code>select</code> elements with the <code>class="ui-toggleswitch"</code> or <code>data-role="toggleswitch"</code> are also displayed as toggle switches.</br>
+
+<p>We recommend to use <code>input</code> selectors for toggle switch.</p>
+
+<table class="note deprecated">
+ <tbody>
+ <tr>
+ <th class="note deprecated">Note</th>
+ </tr>
+ <tr>
+ <td class="note deprecated">selector with <span style="font-family: Courier New,Courier,monospace">select[data-role="slider"]</span> has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span>.</i><br>
+ To support Backward compitablity, please import tau.support-2.3.js.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id="html-examples"></a>HTML Examples</h2>
+<p>Following example shows how to create toggle switch in multiple way:</p>
+<h4>ToggleSwitch with input tag</h4>
<pre class="prettyprint">
-<input type="checkbox" data-role="toggleswitch">
-
-<input type="checkbox" id="checkbox-1" data-role="toggleswitch"/>
-<label for="checkbox-1"></label>
+<input type="checkbox" name="toggle-1" id="toggle-1" class="ui-toggleswitch"/>
-<select name="flip-11" id="flip-11" data-role="slider">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-
-<select name="flip-11" id="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-
-<select name="flip-11" id="flip-11" data-role="toggleswitch">
- <option value="off">off option</option>
- <option value="on">on option</option>
+<!-- disabled toggle switch -->
+<input type="checkbox" name="toggle-2" id="toggle-2" class="ui-toggleswitch" disabled/>
+</pre>
+<h4>ToggleSwitch with select tag</h4>
+<pre class="prettyprint">
+<select name="flip-1" id="flip-1" class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
</pre>
+
<h2><a id="manual-constructor"></a>Manual Constructor</h2>
<p>To manually create a toggle switch component, use the component constructor from the <strong>tau</strong> namespace:</p>
<pre class="prettyprint">
-<select id="toggle" name="flip-11" id="flip-11" data-role="toggleswitch" data-mini="true">
- <option value="off"></option>
- <option value="on"></option>
-</select>
+<input type="checkbox" name="toggle-1" id="toggle-1" class="ui-toggleswitch"/>
+
<script>
- var toggleElement = document.getElementById("toggle"),
- toggle = tau.widget.ToggleSwitch(toggleElement);
+ var toggleComponent = tau.widget.ToggleSwitch(document.getElementById("toggle-1"));
</script>
</pre>
-
- <h2><a id="options-list"></a>Options</h2>
-
-<p>The following table lists the options for the toggle switch component.</p>
- <table>
- <tbody>
- <tr>
- <th>Option</th>
- <th>Input type</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
-
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-disabled</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Starts the component as enabled or disabled.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-highlight</span></td>
- <td class="option">boolean</td>
- <td class="option">true</td>
- <td class="option">If set, the toggle switch can be highlighted.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
- <td class="option">boolean | null</td>
- <td class="option">false</td>
- <td class="option">If the value is <code>"true"</code>, the toggle switch has a css property.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-mini</span></td>
- <td class="option">boolean | null</td>
- <td class="option">false</td>
- <td class="option">Sets the size of the toggle switch.</td>
- </tr>
-
-
- </tbody>
- </table>
-
-
-
<h2><a id="methods-list"></a>Methods</h2>
<h3>Summary</h3>
<tr>
<td>
- <pre class="intable prettyprint">
ToggleSwitch <a href="#method-disable">disable</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-disable">disable</a> ( ) </pre>
</td>
<td><p>Disables the toggle switch.</p></td>
</tr>
<tr>
<td>
- <pre class="intable prettyprint">
ToggleSwitch <a href="#method-enable">enable</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-enable">enable</a> ( ) </pre>
</td>
<td><p>Enables the toggle switch.</p></td>
</tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint">ToggleSwitch <a href="#method-refresh">refresh</a> ( ) </pre>
- </td>
- <td><p>Refreshes a toggle switch markup.</p></td>
- </tr>
-
+
<tr>
<td>
- <pre class="intable prettyprint">
string <a href="#method-value">value</a> ( ) </pre>
+ <pre class="intable prettyprint"><a href="#method-value">value</a> ( ) </pre>
</td>
- <td><p>Gets or sets a value.</p></td>
+ <td><p>Gets toggleswitch state value.</p></td>
</tr>
</tbody>
<div class="example">
<span class="example"><p>Code
- example
(TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
+<select name="flip-1" id="flip-1" class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
<script>
var toggle = document.getElementById("flip-11"),
</pre>
</div>
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-<script>
- $("#flip-11").toggleswitch("disable");
-</script>
-</pre>
- </div>
+
</dd>
<div class="example">
<span class="example"><p>Code
- example
(TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
+<select name="flip-1" id="flip-1" class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
<script>
var toggle = document.getElementById("flip-11"),
</pre>
</div>
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-<script>
- $("#flip-11").toggleswitch("enable");
-</script>
-</pre>
- </div>
-
</dd>
-
-
- <dt class="method"><code><b><span class="methodName"
- id="method-refresh">refresh</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Refreshes a toggle switch markup.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">ToggleSwitch refresh ( ) </pre>
- </div>
-
- <div class="description">
- <p>
- <p>The method rebuilds the DOM structure of the toggle switch component. It must be called after you manually change the HTML attributes of component's DOM structure.</p>
-
-<p>The method is called automatically after any component option is changed.</p>
-
-
-
-
- </p>
- </div>
-
-
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
- <table>
- <tbody>
- <tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>ToggleSwitch</td>
- <td>Return this.</td>
- </tr>
- </tbody>
- </table>
-
-
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-<script>
- var toggle = document.getElementById("flip-11"),
- toggleWidget = tau.widget.ToggleSwitch(toggle),
- toggleWidget.refresh();
-</script>
-</pre>
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-<script>
- $("#flip-11").toggleswitch("refresh");
-</script>
-</pre>
- </div>
-
- </dd>
-
-
<dt class="method"><code><b><span class="methodName"
id="method-value">value</span></b></code></dt>
<dd>
<div class="brief">
- <p>Gets or sets a value.</p>
+ <p>Gets a value of toggle switch.</p>
</div>
<div class="synopsis">
- <pre class="signature prettyprint">string value ( ) </pre>
+ <pre class="signature prettyprint">Number value ( ) </pre>
</div>
<p><span class="version">Since: </span>
<div class="description">
<p>
- <p>This method returns the element value or sets the element value.</p>
+ <p>This method returns the element value. For ToggleSwitch, when toggle switch has 'on' state, it returns 1. Otherwise, it returns 0.</p>
<th>Description</th>
</tr>
<tr>
- <td>string</td>
- <td>In the get mode, returns the element value or element.</td>
+ <td>Number</td>
+ <td>Returns the value (0 or 1) of element.</td>
</tr>
</tbody>
</table>
<div class="example">
<span class="example"><p>Code
- example
(TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
+ example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
+<select name="flip-1" id="flip-1" class="ui-toggleswitch">
+ <option value="off"></option>
+ <option value="on"></option>
</select>
<script>
var toggle = document.getElementById("flip-11"),
toggleWidget = tau.widget.ToggleSwitch(toggle),
- // Value contains the index of the select element
- value = toggleWidget.value();
- // Sets the index for the toggle
- toggleWidget.value("1");
-</script>
-</pre>
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<select id="flip-11" name="flip-11" data-role="toggleswitch">
- <option value="off"></option>
- <option value="on"></option>
-</select>
-<script>
- // Value contains the index of the select element
- $("#flip-11").toggleswitch("value");
- // Sets the index for the toggle
- $("#flip-11").toggleswitch("value", "1");
+ toggleState = toggleWidget.value();
+ console.log(toggleState);
</script>
</pre>
</div>
projects / sdk / online-doc.git / commitdiff