<ul>
<li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework</a> Reference</li>
</ul>
- <p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">UI Component Reference</a>.</p></td>
+ <p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">UI Component Reference</a>.</p></td>
</tr>
<tr>
<td><a href="touchpaint_mw.htm">TouchPaint</a></td>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a></li>
</ul>
</div></div>
</div>
<h2 id="setoption">Setting UI Component Options</h2>
-<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a>.</p>
+<p>TAU supports several ways of setting options for a UI component. For more information, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a> and <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a>.</p>
<p>You have the following options for setting the options:</p>
<ul>
<li>Initializing options with the <span style="font-family: Courier New,Courier,monospace;">data-</span> attribute
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<li><a href="ui_fw_api/Base/popup.htm">Popup Handling</a></li>
</ul>
</li>
- <li><a href="ui_fw_api/Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a>
+ <li><a href="ui_fw_api/Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a>
<ul>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_Button.htm">Button</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_Checkbox.htm">Checkbox</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_FloatingActions.htm">FloatingActions</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_GridView.htm">GridView</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm">IndexScrollBar</a></li>
- <li><a href="ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">Listview</a></li>
- <li><a href="ui_fw_api/Mobile_UIComponents/mobile_NavigationBar.htm">NavigationBar</a></li>
+ <li><a href="ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">ListView</a></li>
+ <li><a href="ui_fw_api/Mobile_UIComponents/mobile_Navigation.htm">Navigation</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm">PageIndicator</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_PanelChanger.htm">PanelChanger</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">Popup</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_SearchInput.htm">SearchInput</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_SectionChanger.htm">SectionChanger</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_Slider.htm">Slider</a></li>
+ <li><a href="ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm">Tabs</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm">TextEnveloper</a></li>
+ <li><a href="ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm">TextInput</a></li>
<li><a href="ui_fw_api/Mobile_UIComponents/mobile_ToggleSwitch.htm">ToggleSwitch</a></li>
</ul>
</li>
- <li><a href="ui_fw_api/Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a>
+ <li><a href="ui_fw_api/Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a>
<ul>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_button.htm">Button</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_checkbox.htm">CheckboxRadio</a></li>
<h1>Autodividers</h1>
-<p>The autodividers component is an extension of the <a href="../ns_widget_mobile_Listview.htm">list view component</a>, and it automatically creates dividers for a list view.</p>
+<p>The autodividers component is an extension of the <a href="../mobile_Listview.htm">list view component</a>, and it automatically creates dividers for a list view.</p>
<table class="note deprecated">
<tbody>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, to use checkbox and radio button, please refer <a href="#">Checkbox</a> and <a href="#">Radio</a> Component.
+ <td class="note deprecated">Since 2.4, to use checkbox and radio button, please refer <a href="../mobile_Checkbox.htm">Checkbox</a> and <a href="../mobile_Radio.htm">Radio</a> Component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component 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>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, to use Collapsible component, please use a <a href="#">Expandable</a> Component.
+ <td class="note deprecated">Since 2.4, to use Collapsible component, please use a <a href="../mobile_Expandable.htm">Expandable</a> Component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, to use FastScroll component, please refer <a href="#">IndexScrollbar</a> Component.
+ <td class="note deprecated">Since 2.4, to use FastScroll component, please refer <a href="../mobile_IndexScrollBar.htm">IndexScrollbar</a> Component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, to implement Gallery sample, please use <a href="#">Section Changer</a> component.
+ <td class="note deprecated">Since 2.4, to implement Gallery sample, please use <a href="../mobile_SectionChanger.htm">Section Changer</a> component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, it has been renamed to GroupIndex. To use Group index in Listview, please refer <a href="#">Listview</a> Component.
+ <td class="note deprecated">Since 2.4, it has been renamed to GroupIndex. To use Group index in Listview, please refer <a href="../mobile_Listview.htm#group">Listview</a> Component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, SearchBar component has been renamed to SearchInput. To use this component, please refer <a href="#">SearchInput</a> component.</tr>
+ <td class="note deprecated">Since 2.4, SearchBar component has been renamed to SearchInput. To use this component, please refer <a href="../mobile_SearchInput.htm">SearchInput</a> component.</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, this component has been renamed to DropdownMenu. To use this component, please refer <a href="#">DropdownMenu</a> component.</td>
+ <td class="note deprecated">Since 2.4, this component has been renamed to DropdownMenu. To use this component, please refer <a href="../mobile_DropdownMenu.htm">DropdownMenu</a> component.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, to use Tab Bar component, please refer <a href="#">Tabs</a> component.
+ <td class="note deprecated">Since 2.4, to use Tab Bar component, please refer <a href="../mobile_Tabs.htm">Tabs</a> component.
</tr>
</tbody>
</table>
</tr>
<tr>
<td class="note deprecated">This component has been <span class="deprecated">DEPRECATED since <b>Tizen 2.4</b></span> and will be <i>deleted in Tizen 3.0.</i><br>
-To support Backward compitablity, please import tau.support-2.3.js.</td>
+To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
<tr>
- <td class="note deprecated">Since 2.4, this component has been renamed to TextEnveloper. To use this, please refer <a href="#">TextEnveloper</a> component.
+ <td class="note deprecated">Since 2.4, this component has been renamed to TextEnveloper. To use this, please refer <a href="../mobile_TextEnveloper.htm">TextEnveloper</a> component.
</tr>
</tbody>
</table>
<h2><a id="default-selectors0.22067294060252607"></a>Default Selectors</h2>
-<p>By default, all <code><button></code> elements and all <code><input></code> elements with the <code>type="button"</code>, <code>type="submit"</code>, or <code>type="reset"</code> attribute are displayed as Tizen Web UI buttons. In addition, all elements with the <code>data-role="button"</code> attribute are displayed as Tizen Web UI buttons. To prevent a <code><button></code> or <code><input></code> element from being displayed as a Tizen Web UI button, use the <code>data-role="none"</code> attribute with the element.</p>
+<p>By default, all <code><button></code> elements are displayed as Tizen Web UI buttons.<br>
+In addition, all elements with the <code>class="ui-btn"</code> and <code>data-role="button"</code> attribute are displayed as Tizen Web UI buttons.</p>
<h2><a id="manual-constructor0.8647231981158257"></a>Manual Constructor</h2>
<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>
-<p>If the jQuery library is loaded, you can use its method:</p>
-
-<pre class="prettyprint"><div id="button"></div>
-<script>
- $("#button").button();
-</script>
-</pre>
<h2><a id="html-examples0.3870438882149756"></a>HTML Examples</h2>
<li>
-<p><a id='create-simple button from link using data-role0.20266016316600144'></a>To create a simple button from a link using the <code>data-role</code> attribute:</p>
+<p><a id='create-simple button from link using data-role0.20266016316600144'></a>To create a simple button from a link using the <code>class</code> selector:</p>
-<pre class="prettyprint"><a href="#page2" data-role="button">Link button</a>
+<pre class="prettyprint"><a href="#page2" class="ui-btn">Link button</a>
</pre>
</li>
</li>
-<li>
-
-<p><a id='create-simple button from input using type0.5491938563063741'></a>To create a simple button using the <code><input></code> element:</p>
-
-<pre class="prettyprint"><input type="button" value="Button" />
-<input type="submit" value="Submit Button" />
-<input type="reset" value="Reset Button" />
-</pre>
-
-</li>
-
</ul>
<h2><a id="options-for button widget0.28114810213446617"></a>Options</h2>
<th>Description</th>
</tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-bar</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">If the button is part of a bar, set to <code>true</code>.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-corners</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Sets whether the corners of the button are shown.</td>
- </tr>
-
+
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-icon</span></td>
<td class="option">string | null</td>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-iconpos</span></td>
<td class="option">"left" | "right" | "top" | "bottom" | "notext" | null</td>
- <td class="option">null</td>
+ <td class="option">"left"</td>
<td class="option">Position of the icon.</td>
</tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-iconshadow</span></td>
- <td class="option">boolean</td>
- <td class="option">true</td>
- <td class="option">Sets whether the shadow of the button icon is shown.</td>
- </tr>
+
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
- <td class="option">string | null</td>
- <td class="option">null</td>
+ <td class="option">boolean</td>
+ <td class="option">false</td>
<td class="option">If the value is <code>true</code>, the button has the <code>display = "inline"</code> CSS property.</td>
</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">If the value is <code>true</code>, the button has disabled status.</td>
+ </tr>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>
<p>By default, all buttons in the body content are styled as block-level elements, so they fill the width of the screen. If you want a more compact button that is only as wide as the text and icons inside it, add the <code>data-inline="true"</code> attribute to the button.</p>
-<pre class="prettyprint"><a href="index.html" data-role="button" data-inline="true">Cancel</a>
+<pre class="prettyprint"><a href="#" class="ui-btn" data-inline="true">Cancel</a>
</pre>
<p>If you have multiple buttons that must sit side-by-side on the same line, add the <code>data-inline="true"</code> attribute to each button. This styles the buttons to be the width of their content and floats the buttons so that they sit on the same line.</p>
-<pre class="prettyprint"><a href="index.html" data-role="button" data-inline="true">Cancel</a>
-<a href="index.html" data-role="button" data-inline="true">Save</a>
+<pre class="prettyprint"><a href="#" class="ui-btn" data-inline="true">Cancel</a>
+<a href="#" class="ui-btn" data-inline="true">Save</a>
</pre>
<h3><a id='icon-positioning0.689597582211718'></a>Icon Positioning</h3>
<p>By default, all icons in buttons are placed to the left of the button text. This default can be overridden using the <code>data-iconpos</code> attribute.</p>
-<pre class="prettyprint"><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
+<pre class="prettyprint"><a href="#" class="ui-btn" data-icon="delete" data-iconpos="right">Delete</a>
</pre>
<p>Possible values for the <code>data-iconpos</code> attribute:</p>
<p>You can also create an icon-only button by setting the <code>data-iconpos</code> attribute to <code>"notext"</code>. The button plugin hides the text on-screen, but adds it as a title attribute to the link to provide context for screen readers and devices that support tooltips.</p>
-<pre class="prettyprint"><a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+<pre class="prettyprint"><a href="#" class="ui-btn" data-icon="delete" data-iconpos="notext">Delete</a>
</pre>
<h2><a id="methods0.8668504238594323"></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>
-
-<pre class="prettyprint"><div id="button" data-role="button"></div>
+<pre class="prettyprint"><div id="button" class="ui-btn"></div>
<script>
var buttonElement = document.getElementById("button"),
button = tau.widget.Button(buttonElement);
// For example:
button.value("text");
</script>
-</pre></li>
-
-<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint"><div id="button"></div>
-<script>
- // $("#button").button("methodName", argument1, argument2, ...);
- // For example:
- $("#button").button("value", "new text");
-</script>
-</pre></li></ul>
-
+</pre>
<h3>Summary</h3>
<table class="informaltable">
<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 data-role="button" id="button"></div>
+<div class="ui-btn" id="button"></div>
<script>
var element = document.getElementById("button"),
buttonWidget = tau.widget.Button(element);
</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 data-role="button" id="button"></div>
-<script>
- $("#button").button("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">
-<div data-role="button" id="button"></div>
+<div class="ui-btn" id="button"></div>
<script>
var element = document.getElementById("button"),
buttonWidget = tau.widget.Button(element);
</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 data-role="button" id="button"></div>
-<script>
- $("#button").button("enable");
-</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">
-<div data-role="button" id="button"></div>
+<div class="ui-btn" id="button"></div>
<script>
var element = document.getElementById("button"),
buttonWidget = tau.widget.Button(element);
</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 data-role="button" id="button"></div>
-<script>
- $("#button").button("refresh");
-</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">
-<div data-role="button" id="button"></div>
+<div class="ui-btn" id="button"></div>
<script>
var element = document.getElementById("button"),
buttonWidget = tau.widget.Button(element),
</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 data-role="button" id="button"></div>
-<script>
- // Value contains inner text of button
- $("#button").button("value");
-
- // "New text" will be text of button
- $("#button").button("value", "New text");
-</script>
-</pre>
- </div>
</dd>
</tbody>
</table>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">Widget Reference</a></li>
-
-</ul>
+
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
<h2><a id="default-selector0.8635590926278383"></a>Default Selector</h2>
-<p>By default, all <code><div></code> elements with the <code>data-role="drawer"</code> attribute are displayed as drawers.</p>
+<p>By default, all <code><div></code> elements with the <code>class="ui-drawer"</code> or <code>data-role="drawer"</code> attribute are displayed as drawers.</p>
<h2><a id="html-examples0.06990464706905186"></a>HTML Examples</h2>
-<p>To create a drawer using the <code>data-role</code> attribute, use the following code:</p>
+<p>To create a drawer using the <code>class</code> attribute, use the following code:</p>
-<pre class="prettyprint"><div data-role="drawer" data-position="left" id="leftdrawer">
- <ul data-role="listview">
+<pre class="prettyprint"><div class="ui-drawer" data-position="left" id="leftdrawer">
+ <ul class="ui-listview">
<li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
<li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
<li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-duration</span></td>
<td class="option">number</td>
- <td class="option">100</td>
+ <td class="option">300</td>
<td class="option">Drawer duration in milliseconds.</td>
</tr>
<tr>
<td class="option">Set the drawer overlay when the drawer is opened.</td>
</tr>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-drawer-target</span></td>
+ <td class="option">String</td>
+ <td class="option">".ui-page"</td>
+ <td class="option">Set drawer target element as the css selector.</td>
+ </tr>
</tbody></table>
<h3><a id="drawer-positioning0.7145300961565226"></a>Drawer Position</h3>
<p>You can set the drawer position manually with the <code>data-position</code> attribute:</p>
-<pre class="prettyprint"><div data-role="drawer" data-position="left" id="leftdrawer"></pre>
+<pre class="prettyprint"><div class="ui-drawer" data-position="left" id="leftdrawer"></pre>
<p>The possible values for the attribute are:</p>
<li><code>"right"</code>: Drawer appears from the right side.</li>
</ul>
-<h3><a id='drawer-inner list0.47361634694971144'></a>Drawer Inner List</h3>
-
-<p>The drawer supports 2 inner list styles: main list style and sub-list style. You can set the list style by specifying a class for each inner list item:</p>
-
-<ul>
-<li><code>"ui-drawer-main-list"</code>: Main list style.</li>
-<li><code>"ui-drawer-sub-list"</code>: Sub-list style.</li>
-</ul>
<h2><a id="drawer-methods0.08396544051356614"></a>Methods</h2>
</tr>
</thead>
<tbody>
-
-
-
-
-
-
-
-
-
-
-
-
-
<tr>
<td>
</td>
<td><p>Checks the drawer status.</p></td>
</tr>
-
-
-
-
-
-
-
-
-
-
-
+
<tr>
<td>
<pre class="intable prettyprint"><a href="#method-open">open</a> ( ) </pre>
example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<div data-role="drawer" data-position="left" id="leftdrawer">
- <ul data-role="listview">
+<div class="ui-drawer" data-position="left" id="leftdrawer">
+ <ul class="ui-listview">
<li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
<li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
<li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<div data-role="drawer" data-position="left" id="leftdrawer">
- <ul data-role="listview">
+<div class="ui-drawer" data-position="left" id="leftdrawer">
+ <ul class="ui-listview">
<li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
<li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
<li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
example:</p><p></p></span>
<pre name="code" class="examplecode
prettyprint">
-<div data-role="drawer" data-position="left" id="leftdrawer">
- <ul data-role="listview">
+<div class="ui-drawer" data-position="left" id="leftdrawer">
+ <ul class="ui-listview">
<li class="ui-drawer-main-list"><a href="#">List item 1</a></li>
<li class="ui-drawer-main-list"><a href="#">List item 2</a></li>
<li class="ui-drawer-sub-list"><a href="#">Sub item 1</a></li>
</dl>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">UI Component Reference</a></li>
-
-</ul>
-
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
</tbody>
</table>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">Widget Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
</dl>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">Widget Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
</script>
</pre>
-
-
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">UI Component Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
</tr>
<tr>
<td class="note">
- <ul>
- <li>A <a href="ns_widget_mobile_Button.htm">button component</a> placed inside an <code><a></code> element is not supported in the list view component. The button component must be placed inside a <code><div></code> element.</li>
- <li>If you implement the list view component differently from what is described in the following examples, you must customize the element positioning for your application.</li>
- </ul>
+ <p>If you implement the list view component differently from what is described in the following examples, you must customize the element positioning for your application.</p>
</td>
</tr>
</tbody>
<li><a href="#html-example code0.796579651767388">HTML Examples</a></li>
- <li><a href="#options-list">Options</a></li>
-
- <li><a href="#events-list">Events</a></li>
-
- <li><a href="#methods-list">Methods</a></li>
+ <li><a href="#group">Group Index in Listview</a></li>
</ol>
<h2><a id="default-selectors0.8381957695819438"></a>Default Selectors</h2>
-<p>By default, all <code><ol></code> and <code><ul></code> elements with the <code>data-role="listview"</code> attribute are displayed as list views.</p>
+<p>By default, all <code><ol></code> and <code><ul></code> elements with the <code>class="ui-listview"</code> and <code>data-role="listview"</code> attribute are displayed as list views.</p>
<h2><a id="manual-constructor"></a>Manual Constructor</h2>
tau.widget.Listview(document.getElementById("list"));
</script>
</pre>
-
-<p>If the jQuery library is loaded, you can use its method:</p>
-
-<pre class="prettyprint"><ul id="list">
- <li>Anton</li>
- <li>Arabella</li>
- <li>Barry</li>
- <li>Bill</li>
-</ul>
-<script>
- $('#list').listview();
-</script>
-</pre>
-
<h2><a id="html-example code0.796579651767388"></a>HTML Examples</h2>
<ul>
<li>
-<p>To create a basic 1-line list item with or without an anchor:</p>
+<p>To create a list items without an anchor, use class=<code>"ui-li-static"</code>:</p>
-<pre class="prettyprint"><!--With an anchor-->
-<ul data-role="listview">
- <li><a href="#">Anton</a></li>
- <li><a href="#">Barry</a></li>
- <li><a href="#">Bill</a></li>
-</ul>
-
-<!--Without an anchor-->
-<ul data-role="listview">
- <li>Anton</li>
- <li>Barry</li>
- <li>Bill</li>
+<pre class="prettyprint"><ul class="ui-listview">
+ <li class="ui-li-static">list item1</li>
+ <li class="ui-li-static">list item2</li>
+ <li class="ui-li-static">list item3</li>
+ <li class="ui-li-static">list item4</li>
</ul>
</pre>
</li>
-<li>
+ <li>
-<p>To create a 1-line list item with a subtext.</p>
-<p>If the <code>class="ui-li-multiline"</code> attribute is not used, the subtext is placed next to the main text. With the attribute, the subtext is placed below the main text.</p>
+ <p>To create a list items with an anchor, use class=<code>"ui-li-anchor"</code>:</p>
-<pre class="prettyprint">
-<!--Subtext next to the main text-->
-<ul data-role="listview">
- <li><a href="#">
- Anton
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
- <li><a href="#">
- Barry
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
-</ul>
-
-<!--Subtext below the main text-->
-<ul data-role="listview">
- <li class="ui-li-multiline">Anton
- <span class="ui-li-text-sub">subtext</span>
- </li>
- <li class="ui-li-multiline">Barry
- <span class="ui-li-text-sub">subtext</span>
- </li>
+<pre class="prettyprint"><ul class="ui-listview">
+ <li class="ui-li-anchor"><a href="page1.html">Page1</a></li>
+ <li class="ui-li-anchor"><a href="page2.html">Page2</a></li>
+ <li class="ui-li-anchor"><a href="page3.html">Page3</a></li>
+ <li class="ui-li-anchor"><a href="page4.html">Page4</a></li>
</ul>
</pre>
-</li>
-
-<li>
-
-<p>To create a 1-line list item with a text button or a circle-shaped button:</p>
-<pre class="prettyprint"><ul data-role="listview">
- <li>
- <a href="#">
- Anton
- <div data-role="button" data-inline="true">Button</div>
- </a>
- </li>
- <li>
- <a href="#">
- Barry
- <div data-role="button" data-inline="true" data-icon="plus"
- data-style="circle"></div>
- </a>
- </li>
-</ul>
-</pre>
-
-</li>
-
-<li>
-
-<p>To create a 1-line list item with a thumbnail:</p>
-
-<pre class="prettyprint"><ul data-role="listview">
-
- <!--Thumbnail-->
- <li>
- <a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon" />
- Anton
- </a>
- </li>
-
- <!--Thumbnail on the right side-->
- <li class="ui-li-thumbnail-right">
- <img src="a.jpg" class="ui-li-bigicon" />
- Barry
- </li>
-</ul>
-</pre>
-
-</li>
-
-<li>
-
-<p>To create a 1-line list item with a checkbox:</p>
-
-<pre class="prettyprint"><ul data-role="listview">
- <li class="ui-li-has-checkbox">
- <a href="#"><input type="checkbox" name="c1line-check1" />Anton</a>
- </li>
-</ul>
-</pre>
-
-</li>
-
-
-<li>
-
-<p>To create a basic 2-line list item:</p>
-
-<pre class="prettyprint"><ul data-role="listview">
- <li class="ui-li-has-multiline">
- <a href="#">
- Anton
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
- <li class="ui-li-has-multiline">
- <a href="#">
- Barry
- <span class="ui-li-text-sub">subtext</span>
- </a>
- </li>
-</ul>
-</pre>
-
-</li>
-
-
-<li>
-
-<p>To create a 2-line list item with a color bar:</p>
-
-
-<pre class="prettyprint"><ul data-role="listview">
-
- <!--Color bar, subtext, three star-shaped icons, and text button-->
- <li class="ui-li-has-multiline">
- <a href="#">
- <span class="ui-li-color-bar"
- style="background-color: red;"></span>
- Anton
- <span class="ui-li-text-sub">subtext
- <img src="00_winset_icon_favorite_on.png" />
- <img src="00_winset_icon_favorite_on.png" />
- <img src="00_winset_icon_favorite_on.png" />
- </span>
- <div data-role="button" data-inline="true">button</div>
- </a>
- </li>
-</pre>
-
-</li>
+ </li>
</ul>
- <h2><a id="options-list"></a>Options</h2>
-
-<p>The following table lists the options for the list view 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-inset</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Sets whether the list view is wrapped by an additional layer.</td>
- </tr>
- </tbody>
- </table>
-
- <h2><a id="events-list"></a>Events</h2>
-
-<p>The following table lists the events related to list view component.</p>
-
- <table>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">beforerefreshitems</span></td>
- <td><p>Triggered before the list view items are refreshed.</p></td>
- </tr>
-
- </tbody>
- </table>
-
-
-
- <h2><a id="methods-list"></a>Methods</h2>
- <h3>Summary</h3>
- <table class="informaltable">
- <thead>
- <tr>
- <th>Method</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-destroy">addItem</a> (HTMLElement listItem, number position) </pre>
- </td>
- <td><p>Adds an item to and refreshes the list view.</p></td>
- </tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-destroy">refresh</a> ( ) </pre>
- </td>
- <td><p>Refreshes the list view.</p></td>
- </tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-destroy">removeItem</a> (number position) </pre>
- </td>
- <td><p>Removes an item from and refreshes the list view.</p></td>
- </tr>
-
-
- </tbody>
- </table>
- <dl>
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-destroy">addItem</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Adds an item to and refreshes the list view.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">addItem (HTMLElement listItem, number position) </pre>
- </div>
-
- <div class="description">
- <p>
-
- </p>
- </div>
-
-
- <div class="parameters">
- <p><span class="param">Parameters:</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">listItem</span></td>
- <td>HTMLElement</td>
- <td>Required</td>
- <td></td>
- <td>New <code><li></code> element.</td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">position</span></td>
- <td>number</td>
- <td>Required</td>
- <td></td>
- <td>Position in the list.</td>
- </tr>
- </table></tbody></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:</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint"><ul id="listvi" data-role="listview">
- <li><a href="#">Normal lists</a></li>
- <li><a href="#">Normal lists</a></li>
-</ul>
-<script>
- var element = document.getElementById("listvi"),
- listv = tau.widget.Listview(element);
- listv.addItem("<li>Test<div data-role='button' data-inline='true'>TEST</div></li>", 2);
-</script>
-</pre>
- </div>
-
- </dd>
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-destroy">refresh</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Refreshes the list view.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">refresh ( ) </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:</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint"><ul id="listvi" data-role="listview">
- <li><a href="#">Normal lists</a></li>
- <li><a href="#">Normal lists</a></li>
+<h2><a id="group"></a>Group Index in Listview</h2>
+<p>To add Group Index (it was <i>ListDivider</i> in tizen2.3 TAU), just add a class=<code>"ui-group-index"</code>.</p>
+<pre class="prettyprint"><ul class="ui-listview">
+ <li class="ui-group-index">group 1</li>
+ <li class="ui-li-static">list item1</li>
+ <li class="ui-li-static">list item2</li>
+ <li class="ui-group-index">group 2</li>
+ <li class="ui-li-static">list item1</li>
+ <li class="ui-li-static">list item2</li>
</ul>
-<script>
- var element = document.getElementById("listvi"),
- listv = tau.widget.Listview(element);
- listv.refresh();
-</script>
</pre>
- </div>
-
- </dd>
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-destroy">removeItem</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Removes an item from and refreshes the list view.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">removeItem (number position) </pre>
- </div>
-
- <div class="description">
- <p>
-
- </p>
- </div>
-
-
- <div class="parameters">
- <p><span class="param">Parameters:</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">position</span></td>
- <td>number</td>
- <td>Required</td>
- <td></td>
- <td>Position in the list.</td>
- </tr>
- </table></tbody></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:</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<ul id="listvi" data-role="listview">
- <li><a href="#">Normal lists</a></li>
- <li><a href="#">Normal lists</a></li>
-</ul>
-<script>
- var element = document.getElementById("listvi"),
- listv = tau.widget.Listview(element);
- listv.removeItem(0);
-</script>
-</pre>
- </div>
-
- </dd>
-
-
- </dl>
<div id="footer">
--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head>
+ <script type="text/javascript" src="../snippet.js"></script>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link href="../styles.css" rel="StyleSheet" type="text/css">
+ <link href="../snippet.css" rel="StyleSheet" type="text/css">
+ <title>Navigation</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Navigation</h1>
+
+
+<p>The navigation component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation, you can move to the target page.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component is supported since Tizen 2.3.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#default-selector">Default Selector</a>
+
+ <li><a href="#html-examples">HTML Examples</a>
+ </li>
+
+ </li>
+
+ <li><a href="#methods-list">Methods</a>
+
+ </li>
+
+</ol>
+
+<h2><a id="default-selector"></a>Default Selector</h2>
+
+<p>Make the navigation component with the <code>class="ui-navigation"</code> or <code>data-role="navigation"</code> attribute. For semantic understanding, use the <code>nav</code> element.</p>
+
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-header" data-position="fixed">
+ <h1>title</h1>
+ <nav class="ui-navigation" id="navigation"></nav>
+ </div>
+ <div class="ui-content"></div>
+</div>
+</pre>
+
+<h2><a id="html-examples"></a>HTML Examples</h2>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To get more efficient experience, aWe recommend to use Navigation component with <a href="mobile_PanelChanger.htm">PanelChanger</a>.</td>
+ </tr>
+ </tbody>
+</table>
+<h4>HTML example with PanelChanger</h4>
+<pre class="prettyprint"><div id="panelPage" class="ui-page">
+ <div class="ui-header" data-position="fixed">
+ <h1>Navigation</h1>
+ <nav id="navigation" class="ui-navigation">
+ </nav>
+ </div>
+ <div class="ui-content">
+ <div id="panelChanger" class="ui-panel-changer">
+ <div id="mainpanel" class="ui-panel">
+ <a href="#panel2">Go Panel 2</a>
+ </div>
+ </div>
+ </div>
+ <script src="./panel.js"></script>
+</div>
+
+<!-- in panel.html -->
+<div id="panel2" class="ui-panel">
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor">
+ <a href="#panel3">Go Panel 3</a>
+ </li>
+ </ul>
+ </div>
+</div>
+<div id="panel3" class="ui-panel">
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor">
+ <a>Panel3</a>
+ </li>
+ </ul>
+ </div>
+</div>
+</pre>
+<h4>JS example with PanelChanger</h4>
+<pre class="prettyprint"><!-- in panel.js -->
+(function() {
+ var page = document.querySelector("#panelPage"),
+ panelChanger = page.querySelector("#panelChanger"),
+ panelChangerComponent,
+ navigation = page.querySelector("#navigation"),
+ navigationComponent,
+ navigated = false;
+
+ page.addEventListener("pagebeforeshow", function(){
+ var activePanel = page.querySelector(".ui-panel-active");
+ panelChangerComponent = tau.widget.PanelChanger(panelChanger);
+ navigationComponent = tau.widget.Navigation(navigation);
+ navigationComponent.push(activePanel.id);
+ });
+ panelChanger.addEventListener("panelchange", function(event) {
+ var toPanel = event.detail.toPanel,
+ direction = event.detail.direction,
+ id = toPanel.id;
+
+ if (id) {
+ if (direction === "forward") {
+ navigationComponent.push(id);
+ } else {
+ if (navigated === false) {
+ navigationComponent.pop();
+ } else {
+ navigated = false;
+ }
+ }
+ } else {
+ console.warn("You should insert id value in the each panels")
+ }
+ });
+ navigation.addEventListener("navigate", function(event) {
+ var id = event.detail.id;
+ navigated = true;
+ panelChangerComponent.changePanel("#" + id, "slide-reverse", "back");
+ });
+})();
+ </pre>
+
+
+
+
+
+ <h2><a id="methods-list"></a>Methods</h2>
+
+ <h3>Summary</h3>
+ <table class="informaltable">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-create">create</a> ( ) </pre>
+ </td>
+ <td><p>Initiates the making of the navigation.</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-push">push</a> ( String targetId ) </pre>
+ </td>
+ <td><p>Add navigation item only one at a time.</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-pop">pop</a> ( ) </pre>
+ </td>
+ <td><p>Pop last child of navigation.</p></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-create">create</span><i><span style="color:red"> :DEPRECATED since 2.4</span></i></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Initiates the making of the navigation.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">create ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+ </dd>
+
+
+ </dl>
+
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-push">push</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Add navigation item only one at a time.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">push ( String targetId ) </pre>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">targetId</span></td>
+ <td>String</td>
+ <td>required</td>
+ <td>element id to be added</td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
+ <pre name="code" class="examplecode
+ prettyprint"><div class="ui-header" data-position="fixed">
+ <h1>Navigation</h1>
+ <nav id="navigation" class="ui-navigation">
+ </nav>
+</div>
+<div class="ui-content">
+ <div id="panelChanger" class="ui-panel-changer">
+ <div id="mainpanel" class="ui-panel" style="background-color:#ffff4f">
+ <a href="./panel.html#panel2">Go Panel 2</a>
+ </div>
+ </div>
+</div>
+<script>
+ var navigation = page.querySelector("#navigation"),
+ activePanel = page.querySelector(".ui-panel-active"),
+ navigationComponent = tau.widget.Navigation(navigation);
+ navigationComponent.push(activePanel.id);
+</script></pre>
+ </div>
+
+
+ </dd>
+
+
+ </dl>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-push">pop</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Pop last child of navigation.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">pop ( ) </pre>
+ </div>
+
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
+<pre name="code" class="examplecode prettyprint"><div class="ui-header" data-position="fixed">
+ <h1>Navigation</h1>
+ <nav id="navigation" class="ui-navigation">
+ </nav>
+</div>
+<script>
+ var navigation = page.querySelector("#navigation"),
+ navigationComponent = tau.widget.Navigation(navigation);
+
+ navigationComponent.pop();
+</script>
+</pre>
+ </div>
+
+
+ </dd>
+
+
+ </dl>
+
+
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head>
- <script type="text/javascript" src="../snippet.js"></script>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <link href="../styles.css" rel="StyleSheet" type="text/css">
- <link href="../snippet.css" rel="StyleSheet" type="text/css">
- <title>Navigation Bar</title>
-</head>
-<body onload="prettyPrint()" id="content">
-<h1>Navigation Bar</h1>
-
-
-<p>The navigation bar component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation bar, you can move to the target page.</p>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This component is supported since Tizen 2.3.</td>
- </tr>
- </tbody>
-</table>
-
-
-<h2>Table of Contents</h2>
-<ol class="toc">
-
- <li><a href="#default-selector">Default Selector</a>
-
- <li><a href="#html-examples">HTML Examples</a>
- </li>
-
- </li>
-
- <li><a href="#methods-list">Methods</a>
-
- </li>
-
-</ol>
-
-<h2><a id="default-selector"></a>Default Selector</h2>
-
-<p>Make the navigation component with the <code>data-role="navigation"</code> attribute. For semantic understanding, use the <code>nav</code> element.</p>
-
-<pre class="prettyprint"><div data-role="page">
- <div data-role="header" data-position="fixed">
- <h1>title</h1>
- <nav data-role="navigation" id="navigation"></nav>
- </div>
- <div data-role="content"></div>
-</div>
-</pre>
-
-<h2><a id="html-examples"></a>HTML Examples</h2>
-
-<p>To create a navigation bar, an array containing the navigation history is required. Each value of the array must have an identifiable value, such as a name. In the following example, the array is named as "historyArraytoUse".</p>
-<p>The navigation bar component only provides the creation of the visual navigation bar, no functional navigation. You must separately implement the navigational function in the application using other methods, such as <code>history.go()</code>.</p>
-
-<ul><li><p>Declare the navigation in the HTML code using the <code>data-role</code> attribute:</p></li>
-<pre class="prettyprint"><div data-role="page" id="navigation-bar">
- <!--Declare navigation in header-->
- <div data-role="header" data-position="fixed">
- <h1>Navigation bar</h1>
- <nav data-role="navigation" id="navigation">
- </nav>
- </div>
- <!--You can include several pages where to move-->
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="navigation1.html">Move to Navigation1</a></li>
- <li><a href="navigation2.html">Move to Navigation2</a></li>
- </ul>
- </div>
-</div>
-</pre></li>
-
-<li><p>Make a history array and create the navigation bar in the JavaScript code:</p></li>
-<pre class="prettyprint">
-var historyMaker = function(event)
-{
- // Store the browsing history in navigationHistory array
- var iteration = window.navigationHistory.length,
- i = 0,
- targetId = event.target.id;
-
- if (!iteration)
- {
- navigationHistory.push({pageId : targetId});
- }
- else
- {
- for (i = 0; i < iteration; i++)
- {
- if (targetId === navigationHistory[i].pageId)
- {
- navigationHistory.splice(i + 1, iteration - i - 1);
- break;
- }
- }
- if (i >= iteration)
- {
- navigationHistory.push({pageId : targetId});
- }
- }
-},
-
-historyDrawer = function(event)
-{
- var navi = document.getElementById("navigation"),
- naviWidget = tau.widget.Navigation(navi);
- if (document.getElementsByClassName("ui-navigation-ul")[0].childElementCount)
- {
- tau.warn("Create method should be called only once in a page");
- }
- else
- {
- // Create navigation component with navigationHistory
- naviWidget.create(navigationHistory);
- }
-},
-
-historyMove = function(event)
-{
- var selectedIndex = event.originalEvent.detail,
- barLength = navigationHistory.length;
- // Clear unnecessary array of history out
- navigationHistory.splice(selectedIndex + 1, barLength - selectedIndex );
- history.go(- (barLength - selectedIndex) + 1);
-};
-
-window.navigationHistory = window.navigationHistory || [];
-
-// When page is created and shown, following this event handler need to bind only once
-$(document).one("pagebeforeshow", historyMaker);
-$(document).one("pageshow", historyDrawer);
-$("nav").one("navigate", historyMove);
-</pre>
-
-</ul>
-
-
-
-
-
- <h2><a id="methods-list"></a>Methods</h2>
-
- <h3>Summary</h3>
- <table class="informaltable">
- <thead>
- <tr>
- <th>Method</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
-
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-create">create</a> ( Array navigationHistory ) </pre>
- </td>
- <td><p>Initiates the making of the navigation bar.</p></td>
- </tr>
-
-
- </tbody>
- </table>
- <dl>
-
-
- <dt class="method"><code><b><span class="methodName"
- id="method-create">create</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Initiates the making of the navigation bar.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">create ( Array navigationHistory) </pre>
- </div>
-
- <div class="description">
- <p>
-
- </p>
- </div>
-
- <div class="parameters">
- <p><span class="param">Parameters:</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">navigationHistory</span></td>
- <td>Array</td>
- <td>Required</td>
- <td></td>
- <td></td>
- </tr>
-
-
- </tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
-
- No return value
-
- </div>
-
- </dd>
-
-
- </dl>
-
-
-<div id="footer">
- <hr size="1">
- <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
- href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
- 3.0</a> and all of the Code Examples contained herein are licensed under <a
- href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
- <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
-</div>
-</body>
-</html>
\ No newline at end of file
<li><a href="#options-list">Options</a></li>
<li><a href="#methods-list">Methods</a>
- <ol class="toc">
- <li><a href="#method-setActive">setActive</a>
- </li>
- </ol>
</li>
</ol>
<pre class="prettyprint">
<div id="pageIndicator" class="ui-page-indicator" data-number-of-pages="5" data-max-page="3"></div>
</pre>
+<br>
When you scroll the page(or section) horizontally, the number of exceeding pages( in this case, it is 2 pages, which is the result of 5 - 3 )<br>
would be indicated by the central dot, from middle of the pages.<br>
<br>
</dl>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">UI Component Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
<h1>Panel Changer</h1>
<p>To implement multi page layout in a page component, you can use panel and panel changer components.</p>
-<p>Panel can have header, content and so on like the page component.</p>
-<p>It works even if the panel components is in other HTML files.</p>
-<p>Panel changer component controls lifecycle of the panels.</p>
+<p>Panel can have header, content and so on like the page component.<br>
+It works even if the panel components is in other HTML files.<br>
+Panel changer component controls lifecycle of the panels.</p>
<h2>Table of Contents</h2>
<li><a href="#options-list">Options</a>
</li>
+ <li><a href="#events-list">Events</a>
+ </li>
<li><a href="#methods-list">Methods</a>
</li>
- <li><a href="#events-list">Events</a>
- </li>
</ol>
<h2><a id="default-selectors"></a>Default Selectors</h2>
<p>By default, all elements with the class="ui-panel-changer" or data-role="panel-changer" attribute are displayed as panel changer components.</p>
-<p>Panel components use the data-role="panel" or class="ui-panel".</p>
+<p>Panel components use the class="ui-panel" or data-role="panel"</p>
<h2><a id='manual-constructor'></a>Manual Constructor</h2>
</tbody>
</table>
+<h2><a id="events-list"></a>Events</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforecreate</span></td>
+ <td><p>Triggered before the new panel component is created and initialized.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelcreate</span></td>
+ <td><p>Triggered after the new panel component creation.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforeshow</span></td>
+ <td><p>Triggered before the new panel is displayed.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelshow</span></td>
+ <td><p>Triggered after the new panel is displayed.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforehide</span></td>
+ <td><p>Triggered before the current panel is about to be closed.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelhide</span></td>
+ <td><p>Triggered after the current panel is hidden.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">panelchange</span></td>
+ <td><p>Triggered after switching from the current panel to the new panel.</p></td>
+ </tr>
+
+ </tbody>
+</table>
<h2><a id="methods-list"></a>Methods</h2>
</dl>
- <h2><a id="events-list"></a>Events</h2>
-
- <table>
- <tbody>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforecreate</span></td>
- <td><p>Triggered before the new panel component is created and initialized.</p></td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelcreate</span></td>
- <td><p>Triggered after the new panel component creation.</p></td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforeshow</span></td>
- <td><p>Triggered before the new panel is displayed.</p></td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelshow</span></td>
- <td><p>Triggered after the new panel is displayed.</p></td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelbeforehide</span></td>
- <td><p>Triggered before the current panel is about to be closed.</p></td>
- </tr>
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelhide</span></td>
- <td><p>Triggered after the current panel is hidden.</p></td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">panelchange</span></td>
- <td><p>Triggered after switching from the current panel to the new panel.</p></td>
- </tr>
-
- </tbody>
- </table>
-
-
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">Widget Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
<h2><a id="html-examples0.866303835529834"></a>HTML Examples</h2>
-<h4>progressbar type</h4>
+<h4>bar type</h4>
<pre class="prettyprint">
-<div class="ui-progress" data-type="progressbar"></div>
+<div class="ui-progress" data-type="bar"></div>
</pre>
<h4>activitybar type</h4>
<div class="ui-progress" data-type="activitybar"></div>
</pre>
-<h4>progresscircle type</h4>
+<h4>circle type</h4>
<pre class="prettyprint">
-<div class="ui-progress" data-type="progresscircle"></div>
+<div class="ui-progress" data-type="circle"></div>
</pre>
<h4>activitycircle type</h4>
<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>
+<p>To manually create a progress component, use the component constructor from the <code>tau</code> namespace:</p>
<pre class="prettyprint"><div id="progress"></div>
<script>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-type</span></td>
- <td class="option">"progressbar" | "progresscircle" |<br>
+ <td class="option">"bar" | "circle" |<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-size</span></td>
+ <td class="option">"small" | "medium" |<br>
+ "large" | "full"</td>
+ <td class="option">"medium"</td>
+ <td class="option">Sets size of progress component.<br>
+ (It used only with "circle" and "activitycircle" type)</td>
+ </tr>
<tr>
<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>
+ <td class="option">100</td>
+ <td class="option">Sets default value of progress component.</td>
</tr>
-
- </tbody>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-max</span></td>
+ <td class="option">Number</td>
+ <td class="option">100</td>
+ <td class="option">Sets default max value of progress component.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-min</span></td>
+ <td class="option">Number</td>
+ <td class="option">0</td>
+ <td class="option">Sets default min value of progress component.</td>
+ </tr>
+
+
+ </tbody>
</table>
<h2><a id="methods0.7043644052464515"></a>Methods</h2>
</tr>
</thead>
<tbody>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-disable">disable</a> ( ) </pre>
- </td>
- <td><p>Disable Progress component.</p></td>
- </tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-enable">enable</a> ( ) </pre>
- </td>
- <td><p>Enable Progress component.</p></td>
- </tr>
<tr>
<td>
</tbody>
</table>
- <dl>
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-disable">disable</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Disable Progress component.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">disable ( ) </pre>
- </div>
- <div class="description">
- <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>
- </div>
- <div class="example">
- <span class="example"><p>Code
- example:</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint"><script>
- var element = document.getElementById("progress"),
- progress = tau.widget.Progress(element);
-
- progress.disable();
-</script>
-</pre>
- </div>
-
- </dd>
-
- <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>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:</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint"><script>
- var element = document.getElementById("progress"),
- progress = tau.widget.Progress(element);
- progress.enable();
-</script>
-</pre>
- </div>
-
- </dd>
<dt class="method" id="addidp28072"><code><b><span class="methodName"
id="method-value">value</span></b></code></dt>
<p>To manually create a slider component, use the component constructor from the <code>tau</code> namespace</p>
-<pre class="prettyprint"><input id="slider">
+<pre class="prettyprint"><input id="slider" />
<script>
var sliderElement = document.getElementById("slider"),
slider = tau.widget.Slider(sliderElement);
<p>To create slider input:</p>
-<pre class="prettyprint"><input type="range" name="slider-1" id="slider" value="60" min="0" max="100">
+<pre class="prettyprint"><input type="range" name="slider-1" id="slider" value="60" min="0" max="100" />
</pre>
<h2><a id="options-list"></a>Options</h2>
<p>To call a method on the component, use one of the existing APIs:</p>
-<pre class="prettyprint"><input id="slider" type="range" name="slider"
- value="60" min="0" max="100">
+<pre class="prettyprint"><input id="slider" type="range" name="slider" value="60" min="0" max="100" />
<script>
var slider = document.getElementById("slider"),
slider = tau.widget.Slider(slider);
<p>
<p>The method sets the disabled attribute for the slider and changes the look of the slider to the disabled state.</p>
-
-
-
</p>
</div>
-
-
-
+
<div class="returntype">
<p><span class="return">Return value:</span></p>
</tr>
</tbody>
</table>
-
-
</div>
-
<div class="example">
<span class="example"><p>Code
example:</p><p></p></span>
</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">
-<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" />
-<script>
- $("#mySlider1").slider("disable");
-</script>
-</pre>
- </div>
- -->
+
</dd>
-
-
-
+
<dt class="method" id="addidp28072"><code><b><span class="methodName"
id="method-enable">enable</span></b></code></dt>
<dd>
</p>
</div>
-
-
-
+
<div class="returntype">
<p><span class="return">Return value:</span></p>
</tr>
</tbody>
</table>
-
-
+
</div>
<div class="example">
</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">
-<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" />
-<script>
- $("#mySlider1").slider("enable");
-</script>
-</pre>
- </div>
- -->
+
</dd>
-
-
-
-
-
-
-
-
-
-
<dt class="method" id="addidp28072"><code><b><span class="methodName"
id="method-refresh">refresh</span></b></code></dt>
<dd>
</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">
-<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" />
-<script>
- $("#mySlider1").slider("refresh");
-</script>
-</pre>
- </div>
- -->
+
</dd>
</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">
-<input id="mySlider1" name="mySlider1" data-popup='false' type="range" value="5" min="0" max="10" />
-<script>
- // Value contains index of select tag
- $("#mySlider1").slider("value");
- // Sets the index for the slider
- $("#mySlider1").slider("value", "1");
-</script>
-</pre>
- </div>
- -->
+
</dd>
</head>
<body onload="prettyPrint()" id="content">
<h1>Tabs</h1>
-The Tabs component is a controller component for operate closely with tabbar and sectionChanger.So this component should be used with tabbar and sectionChanger.
+The Tabs component is a controller component for operate closely with tabbar and sectionChanger.
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component is just a controller. So, please use this component with <a href="#tabbar">tabbar</a> and <a href="mobile_SectionChanger.htm">SectionChanger</a> component.</td>
+ </tr>
+ </tbody>
+</table>
<h2>Table of Contents</h2>
<ol class="toc">
<h2><a id='html-examples0.6093457289971411'></a>HTML Examples</h2>
-<pre class="prettyprint">
- <div id="tabs" class="ui-tabs">
- <div class="ui-tabbar">
- <ul>
- <li><a href="#" class="ui-btn-active">Tab1</a></li>
- <li><a href="#">Tab2</a></li>
- <li><a href="#">Tab3</a></li>
- </ul>
- </div>
- <div class="ui-section-changer">
- <div>
- <section class="ui-section-active">
- <ul class="ui-listview">
- <li class="ui-li-static">
- Section 1
- </li>
- </ul>
- </section>
- <section>
- <ul class="ui-listview">
- <li class="ui-li-static">
- Section 2
- </li>
- </ul>
- </section>
- <section>
- <ul class="ui-listview">
- <li class="ui-li-static">
- Section 3
- </li>
- </ul>
- </section>
- </div>
- </div>
- </div>
+<h4><a id="tabbar"></a>Using tabbar in Tabs component</h4>
+<p>To use Tabs component, it need tabbar as child.<br>
+When define tabbar in HTML, just add <code>class="ui-tabbar"</code>. Please refer following code:</p>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-tabs">
+ <div class="ui-tabbar">
+ <ul>
+ <li class="ui-li-anchor"><a href="#" class="ui-tab-active">Tab1</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab2</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab3</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab4</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</pre>
+
+<h4>Using tabbar and SectionChanger in Tabs component</h4>
+<pre class="prettyprint"><div class="ui-page">
+ <div class="ui-tabs">
+ <div class="ui-tabbar">
+ <ul>
+ <li class="ui-li-anchor"><a href="#" class="ui-tab-active">Tab1</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab2</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab3</a></li>
+ <li class="ui-li-anchor"><a href="#">Tab4</a></li>
+ </ul>
+ </div>
+ <div class="ui-section-changer" id="sectionChanger">
+ <div>
+ <section class="ui-section-active">
+ Section1
+ </section>
+ <section>
+ Section 2
+ </section>
+ <section>
+ Section 3
+ </section>
+ <section>
+ Section 4
+ </section>
+ </div>
+ </div>
+ </div>
+</div>
</pre>
<h2><a id='manual-constructor0.5351901147514582'></a>Manual constructor</h2>
<pre class="prettyprint"><div class="ui-text-enveloper"></div>
</pre>
-<p>Create simple TextEnveloper from div using data-role:</p>
-
-<pre class="prettyprint"><div data-role="textenveloper"></div>
-</pre>
-
<h2><a id='manual-constructor0.8452272061258554'></a>Manual constructor</h2>
<ol class="toc">
<li><a href="#default-selectors0.465151343960315">Default selectors</a></li>
-
- <li><a href="#manual-constructor0.19925307971425354">Manual constructor</a></li>
<li><a href="#html-examples0.4583768437150866">HTML Examples</a></li>
<p>In default elements matches to :</p>
<ul>
-<li>INPUT with type "text" or "number" or "password" or "email" or "url" or "tel" or "month" or "week" or "datetime-local" or "color" or without any
-type</li>
+<li>INPUT with type "text" or "number" or "password" or "email" or "url" or "tel"</li>
<li>TEXTAREA</li>
-<li>HTML elements with class <em>ui-text-input</em></li>
+<li>INPUT elements with class <em>ui-text-input</em></li>
</ul>
-<h2><a id='manual-constructor0.19925307971425354'></a>Manual constructor</h2>
-
-<p>For manual creation of TextInput component you can use constructor from <strong>tau</strong> namespace:</p>
-
-<pre class="prettyprint"> <form>
- <label for="text-1">Text input:</label>
- <input type="search" name="text-1" id="text-1" value="">
- </form>
- <script>
- var inputElement = document.getElementById("text-1"),
- textInput = tau.widget.TextInput(inputElement);
- </script>
-</pre>
-
<h2><a id='html-examples0.4583768437150866'></a>HTML Examples</h2>
-<h4><a id='create-simple text input on input element0.7723784036934376'></a>Create simple text input on INPUT element</h4>
+<h4><a id='create-simple text input on input element0.7723784036934376'></a>Create simple text input on INPUT element with clear button</h4>
-<pre class="prettyprint"> <form>
- <label for="text-1">Text input:</label>
- <input type="text" name="text-1" id="text-1" value="">
- </form>
+<pre class="prettyprint"><label for="texttype">Text Input:</label>
+<input type="text" name="texttype" id="texttype" placeholder="Input text here" data-clear-btn="true"/>
</pre>
<h4><a id='create-simple text input on textarea element0.9774331215303391'></a>Create simple text input on TEXTAREA element</h4>
-<pre class="prettyprint"> <form>
- <label for="text-1">Text input:</label>
- <textarea name="text-1" id="text-1"></textarea>
- </form>
+<pre class="prettyprint"><label for="textarea">Text Area:</label>
+<textarea type="text" name="textarea" id="textarea" placeholder="Input text here"></textarea>
</pre>
-<h4><a id='create-simple text input on input element with class ui-text-input0.9696237402968109'></a>Create simple text input on INPUT element with class ui-text-input</h4>
-
-<pre class="prettyprint"> <form>
- <label for="text-1">Text input:</label>
- <input name="text-1" id="text-1" class="ui-text-input">
- </form>
-</pre>
<h2><a id="options-list"></a>Options</h2>
<span class="example"><p>Code
example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<input id="input" />
+ prettyprint"><input type="text" name="texttype" id="texttype" />
<script>
- var inputElement = document.getElementById("input"),
- textInputWidget = tau.widget.TextInput();
+ var inputElement = document.getElementById("texttype"),
+ textInputWidget = tau.widget.TextInput();
- textInputWidget.enable();
+ textInputWidget.enable();
</script>
</pre>
</div>
<span class="example"><p>Code
example:</p><p></p></span>
<pre name="code" class="examplecode
- prettyprint">
-<input id="input" />
+ prettyprint"><input type="text" name="texttype" id="texttype" />
<script>
- var inputElement = document.getElementById("input"),
- textInputWidget = tau.widget.TextInput();
+ var inputElement = document.getElementById("texttype"),
+ textInputWidget = tau.widget.TextInput();
- textInputWidget.disable();
+ textInputWidget.disable();
</script>
</pre>
</div>
</dl>
-<h2>Where to Go Next</h2>
-<ul>
- <li><a href="./widget_reference.htm">UI Component Reference</a></li>
-
-</ul>
<div id="footer">
<hr size="1">
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
</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>
+ To support Backward compatibility, please import tau.support-2.3.js.</td>
</tr>
</tbody>
</table>
</tr>
<tr>
- <td><a href="mobile_NavigationBar.htm">Navigation Bar</a></td>
- <td>Navigation bar component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation bar, the user can move to the target page.</td>
+ <td><a href="mobile_Navigation.htm">Navigation</a></td>
+ <td>Navigation component is used inside the header to navigate back and forth according to the navigational history array, which is created by the application. By clicking a horizontally-listed element on the navigation bar, the user can move to the target page.</td>
<td>2.3</td>
</tr>
<td>References of base APIs to organize and managing application.</td>
</tr>
<tr>
- <td><a href="Mobile_UIComponents/widget_reference.htm">Mobile UI Components</a></td>
+ <td><a href="Mobile_UIComponents/mobile_component_list.htm">Mobile UI Components</a></td>
<td>References of UI Components for Mobile profile.</td>
</tr>
<tr>
- <td><a href="Wearable_UIComponents/widget_reference.htm">Wearable UI Components</a></td>
+ <td><a href="Wearable_UIComponents/wearable_component_list.htm">Wearable UI Components</a></td>
<td>References of UI Components for Wearable profile.</td>
</tr>
<tr>
<td><a href="Globalization/globalization.html">Globalization</a></td>
<td>References of Globalization utility library.</td>
</tr>
+ <tr>
+ <td><a href="Animation/animation.htm">Animation</a></td>
+ <td>References of Animation APIs.</td>
+ </tr>
</tbody>
</table>
<topic href="html/ui_fw_api/Base/page.htm" label="Page Handling"></topic>
<topic href="html/ui_fw_api/Base/popup.htm" label="Popup Handling"></topic>
</topic>
- <topic href="html/ui_fw_api/Mobile_UIComponents/widget_reference.htm" label="Mobile UI Components">
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm" label="Mobile UI Components">
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm" label="Button"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Checkbox.htm" label="Checkbox"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm" label="ColoredListView"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Drawer.htm" label="Drawer"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm" label="DropdownMenu"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Expandable.htm" label="Expandable"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_FloatingActions.htm" label="FloatingActions"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_GridView.htm" label="GridView"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm" label="IndexScrollBar"></topic>
- <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm" label="Listview"></topic>
- <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_NavigationBar.htm" label="NavigationBar"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm" label="ListView"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Navigation.htm" label="Navigation"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm" label="PageIndicator"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_PanelChanger.htm" label="PanelChanger"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm" label="Popup"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Progress.htm" label="Progress"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Radio.htm" label="Radio"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_SearchInput.htm" label="SearchInput"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_SectionChanger.htm" label="SectionChanger"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Slider.htm" label="Slider"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm" label="Tabs"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm" label="TextEnveloper"></topic>
+ <topic href="html/ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm" label="TextInput"></topic>
<topic href="html/ui_fw_api/Mobile_UIComponents/mobile_ToggleSwitch.htm" label="ToggleSwitch"></topic>
</topic>
- <topic href="html/ui_fw_api/Wearable_UIComponents/widget_reference.htm" label="Wearable UI Components">
+ <topic href="html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm" label="Wearable UI Components">
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_button.htm" label="Button"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_checkbox.htm" label="CheckboxRadio"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm" label="CircleProgressBar"></topic>
projects / sdk / online-doc.git / commitdiff