</select>
</pre></li>
-<li>Setting the label type
-
-<p>You can declare the SelectMenu type manually. If you set the <code>data-label</code> attribute to <code>true</code> (default is <code>false</code>), the select menu has a label type. The size of the label type is inherited by its parent element.</p>
-
-<pre class="prettyprint"><div style="width:300px; height:150px;">
- <select id="selectmenu" data-native-menu="false" data-label="true">
- <option value="1">Item1</option>
- <option value="2">Item2</option>
- <option value="3">Item3</option>
- <option value="4">Item4</option>
- </select>
-</div>
-</pre></li>
-
<li>Setting the inline type
<p>When the <code>data-inline</code> attribute is set to <code>true</code>, the select menu width is determined by its text (default is <code>false</code>).</p>
<td class="option">Sets whether the select menu component is of an inline or normal type.</td>
</tr>
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-label</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Sets whether the select menu component is of a label or normal type.</td>
- </tr>
-
-
-
</tbody>
</table>
<h1>Dropdown Menu</h1>
-DropdownMenu widget provide creating DropdownMenu widget in the form of dropdown list and managing its operation.
+DropdownMenu component allows you to create the component in the form of a drop-down list and manage its operation.
<h2>Table of Contents</h2>
<ol class="toc">
<h2><a id='manual-constructor0.6513923294842243'></a>Manual constructor</h2>
-<p>For manual creation of DropdownMenu widget you can use constructor of widget.</p>
+<p>For manual creation of DropdownMenu component you can use constructor of component.</p>
<pre class="prettyprint"> <select id="dropdownmenu" data-native-menu="false">
<option value="1">Item1</option>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-inline</span></td>
<td class="option">boolean</td>
<td class="option">false</td>
- <td class="option">Sets the DropdownMenu widget as inline/normal type.</td>
+ <td class="option">Sets the DropdownMenu component as inline/normal type.</td>
</tr>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-native-menu</span></td>
<td class="option">boolean</td>
<td class="option">true</td>
- <td class="option">Sets the DropdownMenu widget as native/custom type.</td>
+ <td class="option">Sets the DropdownMenu component as native/custom type.</td>
</tr>
</tbody>
</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">
<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>Fast Scroll</title>
+ <title>Index Scrollbar</title>
</head>
<body onload="prettyPrint()" id="content">
-<h1>Fast Scroll</h1>
+<h1>Index Scrollbar</h1>
-<p>The fast scroll component shows a shortcut list that is bound to its parent scroll bar and list view.</p>
+<p>The index scrollbar component shows a shortcut list that is bound to its parent scroll bar and list view.</p>
-<p>The fast scroll component jumps the scroll view to the selected list divider. If you move the mouse over the shortcut column, the scroll view is moved to the list divider matching the text currently under the mouse cursor. A pop-up containing the text is also displayed.</p>
-
-<table class="note deprecated">
- <tbody>
- <tr>
- <th class="note deprecated">Note</th>
- </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>
- </tr>
- <tr>
- <td class="note deprecated">Since 2.4, to use FastScroll component, please refer <a href="#">IndexScrollbar</a> Component.
- </tr>
- </tbody>
-</table>
-
-<p>To use the fast scroll component, add the <code>data-fastscroll="true"</code> attribute to a list view.</p>
+<p>If you move the mouse over the shortcut column, then a pop-up containing the text is also displayed. The scroll view can be moved to the list divider matching the text currently under the mouse cursor.</p>
<h2>Table of Contents</h2>
<ol class="toc">
<li><a href="#html-examples">Manual Constructor</a></li>
- <li><a href="#options0.5842249826528132">Options</a></li>
-
- <li><a href="#events-list">Events</a></li>
-
- <li><a href="#methods0.6541752116754651">Methods</a></li>
-
</ol>
<h2><a id="default-selectors0.7051363934297115"></a>Default Selectors</h2>
-<p>By default, all list view elements (<code>data-role="listview"</code>) with the <code>data-fastscroll="true"</code> attribute are displayed as fast scroll components.</p>
+<p>By default, all elements with the class="ui-indexscrollbar" or data-role="indexscrollbar" attribute are displayed as Index scrollbar components.</p>
<h2><a id="html-examples"></a>Manual Constructor</h2>
-<p>To manually create a fast scroll component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
-
-<pre class="prettyprint"><div data-role="page" id="main">
- <div data-role="content">
- <ul id="list" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- var fastscroll = tau.widget.FastScroll(document.getElementById("list"));
-</script>
-</pre>
-
-<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint"><div data-role="page" id="main">
- <div data-role="content">
- <ul id="list" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- var fastscroll = $("#list").fastscroll();
-</script>
-</pre>
-
-
-
-<h2><a id="options0.5842249826528132"></a>Options</h2>
-
- <p>The following table lists the options for the fast scroll 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-fastscroll</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Sets whether the component is enabled.</td>
- </tr>
-
- </tbody>
- </table>
-
- <h2><a id="events-list"></a>Events</h2>
-
- <p>The following table lists the events related to the fast scroll component.</p>
-
- <table>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Description</th>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">destroyed</span></td>
- <td><p>Triggered after the <code>destroy()</code> method is called.</p></td>
- </tr>
-
- </tbody>
- </table>
-
-<h2><a id="methods0.6541752116754651"></a>Methods</h2>
-
-<p>To call a method on the component, use the TAU API:</p>
-
-<pre class="prettyprint"><div data-role="page" id="main">
- <div data-role="content">
- <ul id="contacts" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- var element = document.getElementById("contacts"),
- contacts = tau.widget.FastScroll(element, {fastscroll: true});
- contacts.methodName(methodArgument1, methodArgument2, ...);
-</script>
-</pre>
-
-
- <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">destroy</a> ( ) </pre>
- </td>
- <td><p>Destroys the component.</p></td>
- </tr>
-
-
-
-
- <tr>
- <td>
- <pre class="intable prettyprint">string <a href="#method-indexString">indexString</a> ( string? indexAlphabet ) </pre>
- </td>
- <td><p>Gets or sets an index string.</p></td>
- </tr>
-
-
-
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-refresh">refresh</a> ( ) </pre>
- </td>
- <td><p>Refreshes the component.</p></td>
- </tr>
- </tbody>
- </table>
- <dl>
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-destroy">destroy</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Destroys the component.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">destroy ( )</pre>
- </div>
+<p>To manually create a index scrollbar component, use the component constructor from the <code>tau</code> namespace.</p>
+<p>The index scrollbar component makes index indicator using elements that has "ui-group-index" class.
- <p><span class="version">Since: </span>
- 2.0
- </p>
-
- <div class="description">
- <p>
- <p>This method destroys the current fast scroll component.</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 data-role="page" id="main">
- <div data-role="content">
- <ul id="list" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- var element = document.getElementById("list"),
- fastscroll = tau.widget.FastScroll(element);
- fastscroll.destroy();
-</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="page" id="main">
- <div data-role="content">
- <ul data-role="listview" data-fastscroll="true" id="fastscroll">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- $("#list").fastscroll("destroy");
-</script>
-</pre>
- </div>
-
- </dd>
-
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-indexString">indexString</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Gets or sets an index string.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">?string indexString ( string? indexAlphabet) </pre>
- </div>
-
- <p><span class="version">Since: </span>
- 2.1
- </p>
-
- <div class="description">
- <p>
- <p>This method manages the values to be used in the shortcut items.</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">indexAlphabet</span></td>
- <td>string</td>
- <td>Optional</td>
- <td></td>
- <td>Values to be used in the shortcut items.</td>
- </tr>
-
-
- </tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
- <table>
- <tbody>
- <tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>?string</td>
- <td>Primary and secondary languages.</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">
-<div data-role="page" id="main">
- <div data-role="content">
- <ul id="fastscroll" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- // Get index string
- var element = document.getElementById("fastscroll"),
- fastscroll = tau.widget.FastScroll(element, {fastscroll: true});
- fastscroll.indexString();
-
- // Set index string
- fastscroll.indexString("A,D,J,P,W,Z");
-</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="page" id="main">
- <div data-role="content">
- <ul data-role="listview" data-fastscroll="true" id="fastscroll">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- $("#fastscroll").fastscroll("indexString", "A,D,J,P,W,Z");
-</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 component.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">refresh ( ) </pre>
- </div>
-
- <p><span class="version">Since: </span>
- 2.0
- </p>
-
- <div class="description">
- <p>
- <p>The method updates and redraws the current fast scroll component.</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 data-role="page" id="main">
- <div data-role="content">
- <ul id="list" data-role="listview" data-fastscroll="true">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
- </ul>
- </div>
-</div>
-<script>
- var element = document.getElementById("list"),
- fastscroll = tau.widget.FastScroll(element);
-
- element.insertAdjacentHTML("beforeend", "<li>Bruce</li>");
- fastscroll.refresh();
-</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="page" id="main">
+<pre class="prettyprint">
+<div data-role="page" id="indexscrollbarPage">
+ <div data-role="indexscrollbar" id="indexscrollbar"></div>
<div data-role="content">
- <ul data-role="listview" data-fastscroll="true" id="fastscroll">
- <li data-role="list-divider">A</li>
- <li>Anton</li>
- <li>Arabella</li>
- <li data-role="list-divider">B</li>
- <li>Barry</li>
- <li>Bily</li>
+ <ul data-role="listview" class="ui-listview" id="isbList">
+ <li class="ui-group-index">A</li>
+ <li class="ui-li-static">Anton</li>
+ <li class="ui-li-static">Arabella</li>
+ <li class="ui-group-index">B</li>
+ <li class="ui-li-static">Barry</li>
+ <li class="ui-li-static">Bibi</li>
</ul>
</div>
</div>
<script>
- $("#fastscroll").append("<li>Bruno</li>");
- $("#fastscroll").fastscroll("refresh");
+ var isb = tau.widget.IndexScrollbar(document.getElementById("indexscrollbar"));
</script>
</pre>
- </div>
-
- </dd>
-
-
-
- </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
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This component is supported since <strong>2.3</strong>.</td>
+ <td class="note">This component is supported since <strong>2.4</strong>.</td>
</tr>
</tbody>
</table>
<h2>Table of Contents</h2>
<ol class="toc">
- <li><a href="#manual-constructor">How to Create PageIndicator</a>
+ <li><a href="#default-selectors">Default Selectors</a></li>
- </li>
+ <li><a href="#manual-constructor">Manual Constructor</a></li>
- <li><a href="#options-list">Options</a>
+ <li><a href="#html-examples">HTML Examples</a></li>
- </li>
+ <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>
-<h2><a id='manual-constructor'></a>How to Create PageIndicator</h2>
+<h2><a id="default-selectors"></a>Default Selectors</h2>
-<p>For manual creation of PageIndicator, you can use constructor from <strong>tau</strong> namespace:</p>
-
-<pre class="prettyprint">var elPageIndicator = document.getElementById("pageindicator"),
- pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages : 5 });
-</pre>
+<p>By default, all elements with the class="ui-pageindicator" or data-role="page-indicator" attribute are displayed as page indicator components.</p>
-<p>Constructor has two require parameter <strong>element</strong> which are base <strong>HTMLElement</strong> to create component. We recommend get this element by method <em>document.getElementById</em>. Second parameter is <strong>options</strong> and it is a object with options for component. numberOfPages means the number of pages to be linked and it is mandatory.</p>
+<h2><a id='manual-constructor'></a>Manual Constructor</h2>
-<p>To add an PageIndicator component to the application, use the following code:</p>
+<p>For manual creation of PageIndicator, you can use constructor from <strong>tau</strong> namespace:</p>
-<pre class="prettyprint"> <div id="pageIndicator" class="ui-page-indicator"></div>
- <script>
- var elPageIndicator = document.getElementById("pageIndicator"),
- pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 }),
- index = 1;
- pageIndicator.setActive(index);
-</script>
+<pre class="prettyprint">
+var elPageIndicator = document.getElementById("pageIndicator"),
+ pageIndicator = tau.widget.PageIndicator(elPageIndicator, {numberOfPages: 5});
</pre>
-<p>index value means index of active page.</p>
+<p>Constructor has two require parameter <strong>element</strong> which are base <strong>HTMLElement</strong> to create component. We recommend get this element by method <em>document.getElementById</em>.</p>
+<p>Second parameter is <strong>options</strong> and it is a object with options for component. numberOfPages means the number of pages to be linked and it is <strong>mandatory</strong>.</p>
-<p>In the following example, the change of page is indicated in PageIndicator component by using PageIndicator with <a href="widget_section_changer.htm">SectionChanger</a> component.</p>
+<h2><a id="html-examples"></a>HTML Examples</h2>
+<ul><li>
+<p>To create page indicator</p>
<pre class="prettyprint">
-<div id="pageIndicatorPage" class="ui-page">
- <header class="ui-header">
- <h2 class="ui-title">Page Indicator</h2>
- </header>
- <div id="pageIndicator" class="ui-page-indicator"></div>
- <div id="hsectionchanger" class="ui-content">
- <div>
- <section class="ui-section-active" style="text-align:center" >
- <h3> Page1 of 5</h3>
- </section>
- <section style="text-align:center">
- <h3> Page2 of 5</h3>
- </section>
- <section style="text-align:center">
- <h3> Page3 of 5</h3>
- </section>
- <section style="text-align:center">
- <h3> Page4 of 5 </h3>
- </section>
- <section style="text-align:center">
- <h3> Page5 of 5 </h3>
- </section>
- </div>
- </div>
- <script>
- (function() {
- var self = this,
- page = document.getElementById( "pageIndicatorPage" ),
- changer = document.getElementById( "hsectionchanger" ),
- sectionChanger,
- elPageIndicator = document.getElementById("pageIndicator"),
- pageIndicator,
- pageIndicatorHandler;
-
- page.addEventListener( "pagebeforeshow", function() {
- // Create PageIndicator
- pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 });
- pageIndicator.setActive(0);
-
- sectionChanger = new tau.widget.SectionChanger(changer, {
- circular: true,
- orientation: "horizontal",
- useBouncingEffect: true
- });
- });
-
- page.addEventListener( "pagehide", function() {
- sectionChanger.destroy();
- pageIndicator.destroy();
- });
-
- // Indicator setting handler
- pageIndicatorHandler = function (e) {
- pageIndicator.setActive(e.detail.active);
- };
-
- // Bind the callback
- changer.addEventListener("sectionchange", pageIndicatorHandler, false);
- })();
- </script>
-</div>
+<div id="pageIndicator" class="ui-page-indicator" data-number-of-pages="5"></div>
</pre>
-<p>If you use the following statement when you create page indicator component, a central dot is assigned to multiple pages.</p>
-
+<p>data-number-of-page attribute is same as numberOfPages option in manual constructor description.</p>
+</li>
+<br>
+<li>
+<p>To use page indicator with section changer component</p>
<pre class="prettyprint">
-pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5, maxPage: 3 });
+<div class="ui-content">
+ <div class="ui-page-indicator" id="pageIndicator" data-number-of-pages="4" style="bottom: 0;"></div>
+ <div id="hsectionchanger" class="ui-section-changer">
+ <!-- section changer has only one child. -->
+ <div>
+ <section class="ui-section-active">
+ <ul class="ui-listview">
+ <li class="ui-li-static">List</li>
+ </ul>
+ </section>
+ <section>
+ <ul class="ui-listview">
+ <li class="ui-li-static">List</li>
+ </ul>
+ </section>
+ <section>
+ <ul class="ui-listview">
+ <li class="ui-li-static">List</li>
+ </ul>
+ </section>
+ <section>
+ <ul class="ui-listview">
+ <li class="ui-li-static">List</li>
+ </ul>
+ </section>
+ </div>
+ </div>
+</div>
+<script>
+ var sectionChanger = document.getElementById("hsectionchanger"),
+ elPageIndicator = document.getElementById("pageIndicator"),
+ pageIndicator;
+ pageIndicator = tau.widget.PageIndicator(elPageIndicator);
+ sectionChanger.addEventListener("sectionchange", function(e) { pageIndicator.setActive(e.detail.active); }, false);
+</script>
</pre>
+</li></ul>
<h2><a id="options-list"></a>Options</h2>
</table>
<br>
<p>
-Take an example : the situation that the value of numberOfPages is "5"(5 pages in all), and the value of maxPage is "3"(3 dots).<br>
+Take an example : the situation that the value of data-number-of-pages is "5"(5 pages in all), and the value of data-max-page is "3"(3 dots).<br>
+<pre class="prettyprint">
+<div id="pageIndicator" class="ui-page-indicator" data-number-of-pages="5" data-max-page="3"></div>
+</pre>
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>
So, the first dot is for the first page, and the last dot is for the fifth( the last) page.<br>
And the middle dot is shared by 2nd, 3rd and 4th page while scrolling pages.<br>
<br>
-In the case of even value of maxPage( the number of dots on the screen), the next order of half of the maxPage value would work as middle dot.<br>
-For example, in the situation that the value of numberOfPages is "6", and the value of maxPage is "4", the 3rd dot( the result of 4 / 2 + 1) would indicate
+In the case of even value of data-max-page( the number of dots on the screen), the next order of half of the data-max-page value would work as middle dot.<br>
+For example, in the situation that the value of data-number-of-pages is "6", and the value of data-max-page is "4", the 3rd dot( the result of 4 / 2 + 1) would indicate
3rd, 4th and 5th pages as middle dot.<br>
<br>
-Of course, the value of numberOfPages should meet the number of the pages you have added to HTML.<br>
+Of course, the value of data-number-of-pages should meet the number of the pages you have added to HTML.<br>
<br>
-And if the the value of maxPage(dots) exceeds the value of numberOfPages, the value of maxPage would be changed to the value of numberOfPages.<br>
+And if the the value of data-max-page(dots) exceeds the value of data-number-of-pages, indicator dots will be displayed as the value of data-number-of-pages.<br>
For example, in the situation that the value of numberOfPages is "6", and the value of maxPage is "100",there would be still 6 dots on the screen.
</P>
--- /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>TextInput</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>TextInput</h1>
+
+
+TextInput component is decorator for input elements.
+
+
+<h2>Table of Contents</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>
+
+ <li><a href="#options-list">Options</a></li>
+
+ <li><a href="#methods-list">Methods</a></li>
+</ol>
+
+<h2><a id='default-selectors0.465151343960315'></a>Default selectors</h2>
+
+<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>TEXTAREA</li>
+<li>HTML 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 widget you can use constructor of widget 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>
+
+<pre class="prettyprint"> <form>
+ <label for="text-1">Text input:</label>
+ <input type="text" name="text-1" id="text-1" value="">
+ </form>
+</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>
+
+<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>
+
+ <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-clear-btn</span></td>
+ <td class="option">boolean</td>
+ <td class="option">false</td>
+ <td class="option">option indicates that the clear button will be shown</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-text-line</span></td>
+ <td class="option">boolean</td>
+ <td class="option">true</td>
+ <td class="option">option indicates that the text underline will be shown</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">TextInput <a href="#method-enable">enable</a> ( ) </pre>
+ </td>
+ <td><p>Enables the TextInput</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">TextInput <a href="#method-disable">disable</a> ( ) </pre>
+ </td>
+ <td><p>Disables the TextInput</p></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-enable">enable</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Enables the TextInput</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">TextInput enable ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <p>Method removes disabled attribute on input and changes look of input to enabled state.</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>TextInput</td>
+ <td>return 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">
+<input id="input" />
+<script>
+ var inputElement = document.getElementById("input"),
+ textInputWidget = tau.widget.TextInput();
+
+ textInputWidget.enable();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-disable">disable</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Disables the TextInput</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">TextInput disable ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <p>Method adds disabled attribute on input and changes look of input to disable state.</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>TextInput</td>
+ <td>return 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">
+<input id="input" />
+<script>
+ var inputElement = document.getElementById("input"),
+ textInputWidget = tau.widget.TextInput();
+
+ textInputWidget.disable();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+
+ </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
+ 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
</tr>
<tr>
- <td><a href="mobile_Expandable.htm">Index Scrollbar</a></td>
- <td></td>
+ <td><a href="mobile_IndexScrollBar.htm">Index Scrollbar</a></td>
+ <td>Index scrollbar component shows a shortcut list that is bound to its parent scroll bar and list view.</td>
<td>2.4</td>
</tr>
<tr>
<td><a href="mobile_PageIndicator.htm">Page Indicator</a></td>
- <td></td>
+ <td>PageIndicator component presents as a dot-typed indicator.</td>
<td>2.4</td>
</tr>
</tr>
<tr>
- <td>Text Input</td>
- <td></td>
- <td>2.4</td>
+ <td><a href="mobile_TextInput.htm">Text Input</a></td>
+ <td>TextInput component is decorator for input elements.</td>
+ <td>2.0</td>
</tr>
<tr>
projects / sdk / online-doc.git / commitdiff