From f62eae0e6bbae2d8e672f319bce0d49ecea12b01 Mon Sep 17 00:00:00 2001 From: "hagun.kim" Date: Wed, 17 Jun 2015 20:17:52 +0900 Subject: [PATCH] [TAU] Update documents for UI components 1. IndexScrollbar 2. DropdownMenu 3. PageIndicator 4. TextInput 5. SelectMenu(deprecated) Change-Id: I42d8331dc0811e4517606c2fbee3f14fb7a6eacf Signed-off-by: hagun.kim --- .../deprecated/mobile_SelectMenu.htm | 23 - .../Mobile_UIComponents/mobile_DropdownMenu.htm | 14 +- .../Mobile_UIComponents/mobile_IndexScrollBar.htm | 480 +-------------------- .../Mobile_UIComponents/mobile_PageIndicator.htm | 161 +++---- .../Mobile_UIComponents/mobile_TextInput.htm | 279 ++++++++++++ .../Mobile_UIComponents/widget_reference.htm | 12 +- 6 files changed, 385 insertions(+), 584 deletions(-) create mode 100644 org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm index 5dcd684..3899000 100644 --- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm +++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/deprecated/mobile_SelectMenu.htm @@ -103,20 +103,6 @@ To support Backward compitablity, please import tau.support-2.3.js. </select> -

Setting the label type - -

You can declare the SelectMenu type manually. If you set the data-label attribute to true (default is false), the select menu has a label type. The size of the label type is inherited by its parent element.

- -

<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>
-

Setting the inline type

When the data-inline attribute is set to true, the select menu width is determined by its text (default is false).

@@ -175,15 +161,6 @@ To support Backward compitablity, please import tau.support-2.3.js. Sets whether the select menu component is of an inline or normal type. - - data-label - boolean - false - Sets whether the select menu component is of a label or normal type. - - - - diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm index bb96bb3..f8e9f11 100644 --- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm +++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_DropdownMenu.htm @@ -11,7 +11,7 @@

Dropdown Menu

-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.

Manual constructor

For manual creation of DropdownMenu widget you can use constructor of widget.

For manual creation of DropdownMenu component you can use constructor of component.

    <select id="dropdownmenu" data-native-menu="false">
         <option value="1">Item1</option>
@@ -113,14 +113,14 @@ DropdownMenu widget provide creating DropdownMenu widget in the form of dropdown
 		data-inline
 		boolean
 		false
-		Sets the DropdownMenu widget as inline/normal type.
+		Sets the DropdownMenu component as inline/normal type.
 	
 
 	
 		data-native-menu
 		boolean
 		true
-		Sets the DropdownMenu widget as native/custom type.
+		Sets the DropdownMenu component as native/custom type.
 	
 
 	
@@ -413,6 +413,12 @@ widget.disable();
 
 
 
+
+Where to Go Next
+
+	UI Component Reference
+	
+
 	
 
 	
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm
index 4e4dad0..2122b8a 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_IndexScrollBar.htm
@@ -5,32 +5,15 @@
 	
 	
 	
-	Fast Scroll
+	Index Scrollbar
 
 
 
-Fast Scroll
+Index Scrollbar
 
-The fast scroll component shows a shortcut list that is bound to its parent scroll bar and list view.
+The index scrollbar component shows a shortcut list that is bound to its parent scroll bar and list view.
 
-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.
-
-
-        
-                
-                        
-                
-                
-                        
-                
-                
-                        
-        
-Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.

-To support Backward compitablity, please import tau.support-2.3.js.
Since 2.4, to use FastScroll component, please refer IndexScrollbar Component.
-                
-
-To use the fast scroll component, add the data-fastscroll="true" attribute to a list view.
+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.
 
 Table of Contents
 
@@ -39,460 +22,43 @@ To support Backward compitablity, please import tau.support-2.3.js.
 
         Manual Constructor
 
-		Options
-
-		Events
-
-        Methods
-
 
 
 Default Selectors
 
-By default, all list view elements (data-role="listview") with the data-fastscroll="true" attribute are displayed as fast scroll components.
+By default, all elements with the class="ui-indexscrollbar" or data-role="indexscrollbar" attribute are displayed as Index scrollbar components.
 
 Manual Constructor
 
-To manually create a fast scroll component, use the component constructor from the tau namespace (RECOMMENDED):
-
-<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>
-
-
-If the jQuery library is loaded, you can use its method (support for backward compatibility):
-
-<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>
-
-
-
-
-Options
-
-    The following table lists the options for the fast scroll component.
-
-	
-		
-		
-			
-			
-			
-			
-		
-		
-			
-				
-				
-				
-				
-			
-		
-		
-	Option Input type Default value Description
data-fastscroll boolean false Sets whether the component is enabled.
-
-	Events
-
-    The following table lists the events related to the fast scroll component.
-
-	
-		
-		
-			
-			
-		
-
-			
-				
-				
-			
-		
-		
-	Event Description
destroyed Triggered after the destroy() method is called.
-
-Methods
-
-To call a method on the component, use the TAU API:
-
-<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>
-
-
-
-	Summary
-	
-		
-		
-			
-			
-		
-		
-		
-				
-					
-					
-				
-			
-
-		
-			
-				
-					
-					
-				
-
-			
-		
-			
-				
-					
-					
-				
-		
-	Method Description

-						destroy (  ) 
-					 Destroys the component.

-						string indexString ( string? indexAlphabet ) 
-					 Gets or sets an index string.

-						refresh (  ) 
-					 Refreshes the component.
-	
-				destroy
-				
-					
-						Destroys the component.
-					
-					
-						destroy ( )
-					
+To manually create a index scrollbar component, use the component constructor from the tau namespace.
+The index scrollbar component makes index indicator using elements that has "ui-group-index" class.
 
-						
Since: 
-							2.0
-						
-					
-					
-						
-							
This method destroys the current fast scroll component.
-
-
-						
-					
-					
-					
-					
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-						
-							Code
-								example (TAU API RECOMMENDED):

-							-<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>
-
-						
-					
-						
-							Code
-								example (jQuery API support for backward compatibility):

-							-<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>
-
-						
-					
-				
-			
-
-		
-			
-				indexString
-				
-					
-						Gets or sets an index string.
-					
-					
-						?string indexString ( string? indexAlphabet) 
-					
-					
-						Since: 
-							2.1
-						
-					
-					
-						
-							
This method manages the values to be used in the shortcut items.
-
-
-						
-					
-					
-					
-						Parameters:
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-					Parameter Type Required/optional Default value Description
indexAlphabet string Optional Values to be used in the shortcut items.
-					
-					
-					
-						Return value:
-						
-							
-								
-								
-									
-									
-								
-								
-									
-									
-								
-								
-							Type Description
?string Primary and secondary languages.
-						
-						
-					
-					
-						
-							Code
-								example (TAU API RECOMMENDED):

-							-<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>
-
-						
-					
-						
-							Code
-								example (jQuery API support for backward compatibility):

-							-<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>
-
-						
-
-				
-
-				refresh
-				
-					
-						Refreshes the component.
-					
-					
-						refresh ( ) 
-					
-					
-						Since: 
-							2.0
-						
-					
-					
-						
-							
The method updates and redraws the current fast scroll component.
-
-						
-					
-					
-					
-					
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-						
-							Code
-								example (TAU API RECOMMENDED):

-							-<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>
-
-						
-					
-						
-							Code
-								example (jQuery API support for backward compatibility):

-							-<div data-role="page" id="main">
++<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>
 
-						
-					
-				
-			
 
-			
-		
-	
 
 
+Where to Go Next
+
+	UI Component Reference
+	
+
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 		Note
 	
 	
-		This component is supported since 2.3.
+		This component is supported since 2.4.
 	
 	
 
@@ -29,120 +29,90 @@ The highlighted dots represent the corresponing active pages.
 Table of Contents
 
 
-		How to Create PageIndicator
+		
Default Selectors
 
-		
+		Manual Constructor
 
-		Options
+		
HTML Examples
 
-		
+		Options
 
 		Methods
-
 				
-
 						setActive
 						
-
 				
 		
 
 
 
-How to Create PageIndicator
+Default Selectors
 
-For manual creation of PageIndicator, you can use constructor from tau namespace:
-
-var elPageIndicator = document.getElementById("pageindicator"),
-    pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages : 5 });
-
+By default, all elements with the class="ui-pageindicator" or data-role="page-indicator" attribute are displayed as page indicator components.
 
-Constructor has two require parameter element which are base HTMLElement to create component. We recommend get this element by method document.getElementById. Second parameter is options and it is a object with options for component. numberOfPages means the number of pages to be linked and it is mandatory.
+Manual Constructor
 
-To add an PageIndicator component to the application, use the following code:
+For manual creation of PageIndicator, you can use constructor from tau namespace:
 
- <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>
++var elPageIndicator = document.getElementById("pageIndicator"),
+    pageIndicator = tau.widget.PageIndicator(elPageIndicator, {numberOfPages: 5});
 
 
-index value means index of active page.
+Constructor has two require parameter element which are base HTMLElement to create component. We recommend get this element by method document.getElementById.
+Second parameter is options and it is a object with options for component. numberOfPages means the number of pages to be linked and it is mandatory.
 
-In the following example, the change of page is indicated in PageIndicator component by using PageIndicator with SectionChanger component.
+HTML Examples
 
+
+To create page indicator
 -<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>
 
 
-If you use the following statement when you create page indicator component, a central dot is assigned to multiple pages.
-
+data-number-of-page attribute is same as numberOfPages option in manual constructor description.
+
+

+
+To use page indicator with section changer component
 -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>
 
+
 
 	Options
 
@@ -173,20 +143,23 @@ pageIndicator =  tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5, m
 	
 

 
-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).

+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).

+
+<div id="pageIndicator" class="ui-page-indicator" data-number-of-pages="5" data-max-page="3"></div>
+
 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 )

 would be indicated by the central dot, from middle of the pages.

 

 So, the first dot is for the first page, and the last dot is for the fifth( the last) page.

 And the middle dot is shared by 2nd, 3rd and 4th page while scrolling pages.

 

-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.

-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.

+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.

 

-Of course, the value of numberOfPages should meet the number of the pages you have added to HTML.

+Of course, the value of data-number-of-pages should meet the number of the pages you have added to HTML.

 

-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.

+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.

 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.
 
 
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm
new file mode 100644
index 0000000..9324e70
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextInput.htm
@@ -0,0 +1,279 @@
+
+
+
+	
+	
+	
+	
+	TextInput
+
+
+TextInput
+
+
+TextInput component is decorator for input elements.
+
+
+Table of Contents
+
+	
+		Default selectors
+	
+		Manual constructor
+
+		HTML Examples
+	
+		Options
+	
+		Methods
+
+
+Default selectors
+
+In default elements matches to :
+
+
+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
+TEXTAREA
+HTML elements with class ui-text-input
+
+
+Manual constructor
+
+For manual creation of TextInput widget you can use constructor of widget from tau namespace:
+
+    <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>
+
+
+HTML Examples
+
+Create simple text input on INPUT element
+
+    <form>
+        <label for="text-1">Text input:</label>
+        <input type="text" name="text-1" id="text-1" value="">
+    </form>
+
+
+Create simple text input on TEXTAREA element
+
+    <form>
+        <label for="text-1">Text input:</label>
+        <textarea name="text-1" id="text-1"></textarea>
+    </form>
+
+
+Create simple text input on INPUT element with class ui-text-input
+
+    <form>
+        <label for="text-1">Text input:</label>
+        <input name="text-1" id="text-1" class="ui-text-input">
+    </form>
+
+
+	Options
+
+	
+		
+		
+			
+			
+			
+			
+		
+
+			
+				
+				
+				
+				
+			
+		
+			
+				
+				
+				
+				
+			
+		
+		
+	Option Input type Default value Description
data-clear-btn boolean false option indicates that the clear button will be shown
data-text-line boolean true option indicates that the text underline will be shown
+
+
+
+	Methods
+
+	Summary
+	
+		
+		
+			
+			
+		
+		
+		
+		
+			
+				
+					
+					
+				
+			
+		
+			
+				
+					
+					
+				
+			
+		
+		
+	Method Description

+						TextInput enable (  ) 
+					 Enables the TextInput

+						TextInput disable (  ) 
+					 Disables the TextInput
+	
+		
+			
+				enable
+				
+					
+						Enables the TextInput
+					
+					
+						TextInput enable ( ) 
+					
+					
+					
+						
+							
Method removes disabled attribute on input and changes look of input to enabled state.
+
+
+						
+					
+					
+					
+					
+					
+						Return value:
+						
+							
+								
+								
+									
+									
+								
+								
+									
+									
+								
+								
+							Type Description
TextInput return this
+						
+						
+					
+					
+						
+							Code
+								example:

+							+<input id="input" />
+<script>
+    var inputElement = document.getElementById("input"),
+        textInputWidget = tau.widget.TextInput();
+
+    textInputWidget.enable();
+</script>
+
+						
+					
+				
+			
+		
+			
+				disable
+				
+					
+						Disables the TextInput
+					
+					
+						TextInput disable ( ) 
+					
+					
+					
+						
+							
Method adds disabled attribute on input and changes look of input to disable state.
+
+
+						
+					
+					
+					
+					
+					
+						Return value:
+						
+							
+								
+								
+									
+									
+								
+								
+									
+									
+								
+								
+							Type Description
TextInput return this
+						
+						
+					
+					
+						
+							Code
+								example:

+							+<input id="input" />
+<script>
+    var inputElement = document.getElementById("input"),
+        textInputWidget = tau.widget.TextInput();
+
+    textInputWidget.disable();
+</script>
+
+						
+					
+				
+			
+		
+		
+	
+
+Where to Go Next
+
+	UI Component Reference
+	
+
+
+	
+	Except as noted, this content - excluding the Code Examples - is licensed under Creative Commons Attribution
+		3.0 and all of the Code Examples contained herein are licensed under BSD-3-Clause.
For details, see the
+		Content License.
+
+
+
\ No newline at end of file
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm
index d4fc3db..666805b 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm
@@ -73,8 +73,8 @@
 		
 
 		
-			Index Scrollbar
-			
+			Index Scrollbar
+			Index scrollbar component shows a shortcut list that is bound to its parent scroll bar and list view.
 			2.4
 		
 
@@ -92,7 +92,7 @@
 
 		
 			Page Indicator
-			
+			PageIndicator component presents as a dot-typed indicator.
 			2.4
 		
 
@@ -151,9 +151,9 @@
 		
 
 		
-			Text Input
-			
-			2.4
+			Text Input
+			TextInput component is decorator for input elements.
+			2.0
 		
 
 		
-- 
2.7.4