From: heeju Joo Date: Fri, 17 Jul 2015 06:53:54 +0000 (+0900) Subject: [TAU] correction of TAU API reference X-Git-Tag: tizen_3.0/TD_SYNC/20161201~692^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=544a0de7cb5c7fc0680720677b1d8d65f14fbdc1;p=sdk%2Fonline-doc.git [TAU] correction of TAU API reference Change-Id: Iffd89c3c4893cceb3b5ab2683bb605b83747445f Signed-off-by: heeju Joo --- diff --git a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm index 6b235af..ed2562c 100644 --- a/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm +++ b/org.tizen.sampledescriptions/html/mobile_w/sd_mw.htm @@ -230,7 +230,7 @@

Tizen Advanced UI Framework Reference

-

This sample is also explained in the UI Component Reference.

+

This sample is also explained in the UI Component Reference.

TouchPaint @@ -290,4 +290,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga - \ No newline at end of file + diff --git a/org.tizen.ui.guides/html/web/tau/ui_component_w.htm b/org.tizen.ui.guides/html/web/tau/ui_component_w.htm index 9851f65..2e52d9f 100755 --- a/org.tizen.ui.guides/html/web/tau/ui_component_w.htm +++ b/org.tizen.ui.guides/html/web/tau/ui_component_w.htm @@ -28,8 +28,8 @@

Related Info

@@ -79,7 +79,7 @@

Setting UI Component Options

-

TAU supports several ways of setting options for a UI component. For more information, see Mobile UI Components and Wearable UI Components.

+

TAU supports several ways of setting options for a UI component. For more information, see Mobile UI Components and Wearable UI Components.

You have the following options for setting the options:

Initializing options with the data- attribute @@ -206,4 +206,4 @@ - \ No newline at end of file + diff --git a/org.tizen.web.apireference/html/index.htm b/org.tizen.web.apireference/html/index.htm index 4f0bd6f..b23f426 100644 --- a/org.tizen.web.apireference/html/index.htm +++ b/org.tizen.web.apireference/html/index.htm @@ -167,7 +167,7 @@
Popup Handling

-

Mobile UI Components +

Mobile UI Components

-

Wearable UI Components +

Wearable UI Components

Button
CheckboxRadio

Autodividers

The autodividers component is an extension of the list view component, and it automatically creates dividers for a list view.

The autodividers component is an extension of the list view component, and it automatically creates dividers for a list view.

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.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

Section Changer

Section Changer

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

DEPRECATED since Tizen 2.4

deleted in Tizen 3.0.

Default Selectors

By default, all <button> elements and all <input> elements with the type="button", type="submit", or type="reset" attribute are displayed as Tizen Web UI buttons. In addition, all elements with the data-role="button" attribute are displayed as Tizen Web UI buttons. To prevent a <button> or <input> element from being displayed as a Tizen Web UI button, use the data-role="none" attribute with the element.

By default, all <button> elements are displayed as Tizen Web UI buttons.
+In addition, all elements with the class="ui-btn" and data-role="button" attribute are displayed as Tizen Web UI buttons.

Manual Constructor

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

If the jQuery library is loaded, you can use its method:

<div id="button"></div>
-<script>
-   $("#button").button();
-</script>
-

HTML Examples

-

To create a simple button from a link using the data-role attribute:

+

To create a simple button from a link using the class selector:

-

<a href="#page2" data-role="button">Link button</a>
+<a href="#page2" class="ui-btn">Link button</a>

- -

To create a simple button using the <input> element:

- -

<input type="button" value="Button" />
-<input type="submit" value="Submit Button" />
-<input type="reset" value="Reset Button" />
-

- -

Options

@@ -109,21 +92,7 @@ Description - - - data-bar - boolean - false - If the button is part of a bar, set to true. - - - - data-corners - boolean - false - Sets whether the corners of the button are shown. - - + data-icon string | null @@ -134,24 +103,24 @@ data-iconpos "left" | "right" | "top" | "bottom" | "notext" | null - null + "left" Position of the icon. - - - data-iconshadow - boolean - true - Sets whether the shadow of the button icon is shown. - + data-inline - string | null - null + boolean + false If the value is true, the button has the display = "inline" CSS property. - + + + data-disabled + boolean + false + If the value is true, the button has disabled status. + data-style @@ -169,20 +138,20 @@

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 data-inline="true" attribute to the button.

-

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
+<a href="#" class="ui-btn" data-inline="true">Cancel</a>
 
 
 If you have multiple buttons that must sit side-by-side on the same line, add the data-inline="true" 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.
 
-<a href="index.html" data-role="button" data-inline="true">Cancel</a>
-<a href="index.html" data-role="button" data-inline="true">Save</a>
+<a href="#" class="ui-btn" data-inline="true">Cancel</a>
+<a href="#" class="ui-btn" data-inline="true">Save</a>
 
 
 Icon Positioning
 
 By default, all icons in buttons are placed to the left of the button text. This default can be overridden using the data-iconpos attribute.
 
-<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
+<a href="#" class="ui-btn" data-icon="delete" data-iconpos="right">Delete</a>
 
 
 Possible values for the data-iconpos attribute:
@@ -196,16 +165,14 @@
 
 You can also create an icon-only button by setting the data-iconpos attribute to "notext". 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.
 
-<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
+<a href="#" class="ui-btn" data-icon="delete" data-iconpos="notext">Delete</a>
 
 
 Methods
 
 To call a method on the component, use one of the existing APIs:
 
-TAU API (RECOMMENDED):
-
-<div id="button" data-role="button"></div>
+<div id="button" class="ui-btn"></div>
 <script>
    var buttonElement = document.getElementById("button"),
        button = tau.widget.Button(buttonElement);
@@ -214,18 +181,7 @@
    // For example:
    button.value("text");
 </script>
-
-
-jQuery API (support for backward compatibility):
-
-<div id="button"></div>
-<script>
-   // $("#button").button("methodName", argument1, argument2, ...);
-   // For example:
-   $("#button").button("value", "new text");
-</script>
-
-
+
 
 	Summary
 	
@@ -321,10 +277,10 @@
 					
 						
 							Code
-								example (TAU API RECOMMENDED):

+								example:

 							-<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);
@@ -332,17 +288,6 @@
 </script>
 
 						
-
-							Code
-								example (jQuery API support for backward compatibility):

-							-<div data-role="button" id="button"></div>
-<script>
-   $("#button").button("disable");
-</script>
-
-						
 			
@@ -389,10 +334,10 @@
 					
 						
 							Code
-								example (TAU API RECOMMENDED):

+								example:

 							-<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);
@@ -400,17 +345,7 @@
 </script>
 
 						
-
-							Code
-								example (jQuery API support for backward compatibility):

-							-<div data-role="button" id="button"></div>
-<script>
-   $("#button").button("enable");
-</script>
-
-											
+
 				
 			
 		
@@ -459,10 +394,10 @@
 					
 						
 							Code
-								example (TAU API RECOMMENDED):

+								example:

 							-<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);
@@ -470,17 +405,7 @@
 </script>
 
 						
-						
-							Code
-								example (jQuery API support for backward compatibility):

-							-<div data-role="button" id="button"></div>
-<script>
-   $("#button").button("refresh");
-</script>
-
-											
+
 				
 			
 		
@@ -556,10 +481,10 @@
 					
 						
 							Code
-								example (TAU API RECOMMENDED):

+								example:

 							-<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),
@@ -571,21 +496,6 @@
 </script>
 
 						
-
-							Code
-								example (jQuery API support for backward compatibility):

-							-<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>
-
-						
 			
 		
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm
index 469bf4e..4563f41 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_ColoredListview.htm
@@ -65,11 +65,7 @@
 							
 					
 									
 				
 
 
-Where to Go Next
-
-	Widget Reference
-	
-
+
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under Default Selector
 
-By default, all <div> elements with the data-role="drawer" attribute are displayed as drawers.
+By default, all <div> elements with the class="ui-drawer" or data-role="drawer" attribute are displayed as drawers.
 
 HTML Examples
 
-To create a drawer using the data-role attribute, use the following code:
+To create a drawer using the class attribute, use the following code:
 
-<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>
@@ -74,7 +74,7 @@
 			
 				data-duration
 				number
-				100
+				300
 				Drawer duration in milliseconds.
 					
 			
@@ -105,13 +105,19 @@
 				Set the drawer overlay when the drawer is opened.
 			
 
+            
+                data-drawer-target
+                String
+                ".ui-page"
+                Set drawer target element as the css selector.
+            
 			
 
 Drawer Position
 
 You can set the drawer position manually with the data-position attribute:
 
-<div data-role="drawer" data-position="left" id="leftdrawer">
+<div class="ui-drawer" data-position="left" id="leftdrawer">
 
 The possible values for the attribute are:
 
@@ -120,14 +126,6 @@
 "right": Drawer appears from the right side.
 
 
-Drawer Inner List
-
-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:
-
-
-"ui-drawer-main-list": Main list style.
-"ui-drawer-sub-list": Sub-list style.
-
 
 Methods
 
@@ -142,19 +140,6 @@
 		
 		
 		
-		
-			
-		
-			
-		
-			
-		
-			
-		
-			
-		
-			
-		
 			
 				
 					
@@ -171,17 +156,7 @@
 					
 					Checks the drawer status.
 				
-			
-		
-			
-		
-			
-		
-			
-		
-			
-		
-			
+
 				
 					
 						open (  ) 
@@ -239,8 +214,8 @@
 								example:

 						-<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>
@@ -288,8 +263,8 @@
 								example:

 						-<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>
@@ -345,8 +320,8 @@
 								example:

 						-<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>
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 f8e9f11..8d2139b 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
@@ -414,12 +414,6 @@ widget.disable();
 
 
 
-Where to Go Next
-
-	UI Component Reference
-	
-
-	
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 
 
-Where to Go Next
-
-	Widget Reference
-	
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 
-Where to Go Next
-
-	Widget Reference
-	
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 
-
-
-Where to Go Next
-
-	UI Component Reference
-	
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 		
 			
-             
-              A button component placed inside an <a> element is not supported in the list view component. The button component must be placed inside a <div> element.
-              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.
-             
+             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.
             
 		
 		
@@ -38,17 +35,13 @@
 
 		HTML Examples
 
-		Options
-
-		Events
-
-		Methods
+        Group Index in Listview
 
 
 
 Default Selectors
 
-By default, all <ol> and <ul> elements with the data-role="listview" attribute are displayed as list views.
+By default, all <ol> and <ul> elements with the class="ui-listview" and data-role="listview" attribute are displayed as list views.
 
 Manual Constructor
 
@@ -64,449 +57,54 @@
    tau.widget.Listview(document.getElementById("list"));
 </script>
 

-
-If the jQuery library is loaded, you can use its method:
-
-<ul id="list">
-   <li>Anton</li>
-   <li>Arabella</li>
-   <li>Barry</li>
-   <li>Bill</li>
-</ul>
-<script>
-   $('#list').listview();
-</script>
-
-
 HTML Examples
 
 
 
 
 
-To create a basic 1-line list item with or without an anchor:
+To create a list items without an anchor, use class="ui-li-static":
 
-<!--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>
+<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>
 
 
 
 
-
+    

 
-To create a 1-line list item with a subtext.
-If the class="ui-li-multiline" attribute is not used, the subtext is placed next to the main text. With the attribute, the subtext is placed below the main text.
+        To create a list items with an anchor, use class="ui-li-anchor":
 
--<!--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>
+<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>
 
-
-
-
-
-To create a 1-line list item with a text button or a circle-shaped button:
 
-<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>
-
-
-
-
-
-
-To create a 1-line list item with a thumbnail:
-
-<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>
-
-
-
-
-
-
-To create a 1-line list item with a checkbox:
-
-<ul data-role="listview">
-   <li class="ui-li-has-checkbox">
-      <a href="#"><input type="checkbox" name="c1line-check1" />Anton</a>
-   </li>
-</ul>
-
-
-
-
-
-
-
-To create a basic 2-line list item:
-
-<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>
-
-
-
-
-
-
-
-To create a 2-line list item with a color bar:
-
-
-<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>
-
-
-
+    
 
 
 
-	Options
-
-The following table lists the options for the list view component.	
-	
-	
-		
-		
-			
-			
-			
-			
-		
-		
-			
-				
-				
-				
-				
-					
-		
-	Option Input type Default value Description
data-inset boolean false Sets whether the list view is wrapped by an additional layer.
-
-	Events
-
-The following table lists the events related to list view component.	
-	
-	
-		
-		
-			
-			
-		
-		
-			
-				
-				
-			
-		
-		
-	Event Description
beforerefreshitems Triggered before the list view items are refreshed.
-
-
-
-	Methods
 
-	Summary
-	
-		
-		
-			
-			
-		
-		
-		
-		
-				
-					
-					
-				
-
-				
-					
-					
-				
-			
-				
-					
-					
-				
-			
-		
-		
-	Method Description

-						addItem (HTMLElement listItem, number position) 
-					 Adds an item to and refreshes the list view.

-						refresh ( ) 
-					 Refreshes the list view.

-						removeItem (number position) 
-					 Removes an item from and refreshes the list view.
-	
-
-				addItem
-				
-					
-						Adds an item to and refreshes the list view.
-					
-					
-						addItem (HTMLElement listItem, number position) 
-					
-					
-					
-						
-							
-						
-					
-					
-					
-					
-						Parameters:
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					Parameter Type Required/optional Default value Description
listItem HTMLElement Required New <li> element.
position number Required Position in the list.
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-							Code
-								example:

-							<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>
-
-						
-					
-				
-
-				refresh
-				
-					
-						Refreshes the list view.
-					
-					
-						refresh ( ) 
-					
-					
-					
-						
-							
-						
-					
-					
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-							Code
-								example:

-							<ul id="listvi" data-role="listview">
-   <li><a href="#">Normal lists</a></li>
-   <li><a href="#">Normal lists</a></li>
+Group Index in Listview
+To add Group Index (it was ListDivider in tizen2.3 TAU), just add a class="ui-group-index".
+<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>
 
-						
 
-					
-				
 
-				removeItem
-				
-					
-						Removes an item from and refreshes the list view.
-					
-					
-						removeItem (number position) 
-					
-					
-					
-						
-							
-						
-					
-					
-					
-					
-						Parameters:
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					Parameter Type Required/optional Default value Description
position number Required Position in the list.
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-							Code
-								example:

-							-<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>
-
-						
-					
-				
-			
-		
-	
 
 
 
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Navigation.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Navigation.htm
new file mode 100644
index 0000000..68f70fe
--- /dev/null
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Navigation.htm
@@ -0,0 +1,325 @@
+
+
+
+	
+	
+	
+	
+	Navigation
+
+
+Navigation
+
+
+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.
+
+
+	
+		
+			
+		
+		
+			
+		
+	
+Note
This component is supported since Tizen 2.3.
+
+
+Table of Contents
+
+	
+		Default Selector
+			
+		
HTML Examples
+		
+			
+		
+
+		Methods
+			
+		
+	
+
+
+Default Selector
+
+Make the navigation component with the class="ui-navigation" or data-role="navigation" attribute. For semantic understanding, use the nav element.
+
+<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>
+
+
+HTML Examples
+
+    
+    
+        
+    
+    
+        
+    
+    
+Note
To get more efficient experience, aWe recommend to use Navigation component with PanelChanger.
+HTML example with PanelChanger
+<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>
+
+JS example with PanelChanger
+<!-- 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");
+   });
+})();
+    
+
+
+
+
+
+	Methods
+
+	Summary
+	
+		
+		
+			
+			
+		
+		
+		
+		
+			
+				
+					
+					
+				
+                
+                    
+                    
+                
+                
+                    
+                    
+                
+			
+		
+		
+	Method Description

+						create ( ) 
+					 Initiates the making of the navigation.

+                        push ( String targetId ) 
+                    Add navigation item only one at a time.

+                        pop ( ) 
+                    Pop last child of navigation.
+	
+		
+			
+				create :DEPRECATED since 2.4
+				
+					
+						Initiates the making of the navigation.
+					
+					
+						create ( ) 
+					
+					
+					
+						
+							
+						
+					
+
+					
+				
+			
+		
+		
+
+    
+
+
+        push
+        
+            
+                Add navigation item only one at a time.
+            
+            
+                push ( String targetId ) 
+            
+
+            
+                Parameters:
+                
+                    
+                    
+                        
+                        
+                        
+                        
+                    
+
+
+                    
+                        
+                        
+                        
+                        
+                    
+
+
+                    
+                Parameter Type Required / optional Description
targetId String required element id to be added
+            
+
+            
+                            Code
+                                example:

+                            <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>
+            
+
+
+        
+
+
+    
+    
+
+
+        pop
+        
+            
+                Pop last child of navigation.
+            
+            
+                pop ( ) 
+            
+
+
+            
+                                Code
+                                    example:

+<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>
+
+            
+
+
+        
+
+
+    
+	
+
+
+	
+	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/mobile_NavigationBar.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_NavigationBar.htm
deleted file mode 100644
index 09ba7c2..0000000
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_NavigationBar.htm
+++ /dev/null
@@ -1,239 +0,0 @@
-
-
-
-	
-	
-	
-	
-	Navigation Bar
-
-
-Navigation Bar
-
-
-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.
-
-
-	
-		
-			
-		
-		
-			
-		
-	
-Note
This component is supported since Tizen 2.3.
-
-
-Table of Contents
-
-	
-		Default Selector
-			
-		
HTML Examples
-		
-			
-		
-
-		Methods
-			
-		
-	
-
-
-Default Selector
-
-Make the navigation component with the data-role="navigation" attribute. For semantic understanding, use the nav element.
-
-<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>
-
-
-HTML Examples
-
-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".
-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 history.go().
-
-Declare the navigation in the HTML code using the data-role attribute:
-<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>
-
-
-Make a history array and create the navigation bar in the JavaScript code:
--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);
-
-
-
-
-
-
-
-
-	Methods
-
-	Summary
-	
-		
-		
-			
-			
-		
-		
-		
-		
-			
-				
-					
-					
-				
-			
-		
-		
-	Method Description

-						create ( Array navigationHistory ) 
-					 Initiates the making of the navigation bar.
-	
-		
-			
-				create
-				
-					
-						Initiates the making of the navigation bar.
-					
-					
-						create ( Array navigationHistory) 
-					
-					
-					
-						
-							
-						
-					
-					
-					
-						Parameters:
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-						
-						
-						
-						
-						
-					
-					
-					
-					
-					Parameter Type Required/optional Default value Description
navigationHistory Array Required 
-					
-					
-					
-						Return value:
-						
-						
-							No return value
-						
-					
-					
-				
-			
-		
-		
-	
-
-
-	
-	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/mobile_PageIndicator.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm
index 2125a8a..a81aea6 100755
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_PageIndicator.htm
@@ -38,10 +38,6 @@ The highlighted dots represent the corresponing active pages.
 		Options
 
 		Methods
-				
-						setActive
-						
-				
 		
 
 
@@ -147,6 +143,7 @@ Take an example : the situation that the value of data-number-of-pages is "5"(5
  <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.

 

@@ -246,11 +243,6 @@ For example, in the situation that the value of numberOfPages is "6", and the va
 		
 
 
-Where to Go Next
-
-	UI Component Reference
-
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under Panel Changer
 
 To implement multi page layout in a page component, you can use panel and panel changer components.
-Panel can have header, content and so on like the page component.
-It works even if the panel components is in other HTML files.
-Panel changer component controls lifecycle of the panels.
+Panel can have header, content and so on like the page component.

+It works even if the panel components is in other HTML files.

+Panel changer component controls lifecycle of the panels.
 
 
 Table of Contents
@@ -29,17 +29,17 @@
 	Options
 	
 
+    Events
+    
 	Methods
 	
 
-	Events
-	
 
 
 Default Selectors
 
 By default, all elements with the class="ui-panel-changer" or data-role="panel-changer" attribute are displayed as panel changer components.
-Panel components use the data-role="panel" or class="ui-panel".
+Panel components use the class="ui-panel" or data-role="panel"
 
 Manual Constructor
 
@@ -112,6 +112,52 @@ var elPanelChanger = document.getElementById("panelchanger"),
 
 	
 
+Events
+
+
+    
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+        
+        
+    
+
+    
+Name Description
panelbeforecreate Triggered before the new panel component is created and initialized.
panelcreate Triggered after the new panel component creation.
panelbeforeshow Triggered before the new panel is displayed.
panelshow Triggered after the new panel is displayed.
panelbeforehide Triggered before the current panel is about to be closed.
panelhide Triggered after the current panel is hidden.
panelchange Triggered after switching from the current panel to the new panel.
 
 
 Methods
@@ -203,59 +249,7 @@ var elPanelChanger = document.getElementById("panelchanger"),
 
 
 
-	Events
-
-	
-		
-		
-			
-			
-		
-		
-			
-				
-				
-			
-		
-			
-				
-				
-			
-		
-			
-				
-				
-			
-
-			
-				
-				
-			
-
-			
-				
-				
-			
 
-			
-				
-				
-			
-
-			
-				
-				
-			
-		
-		
-	Name Description
panelbeforecreate Triggered before the new panel component is created and initialized.
panelcreate Triggered after the new panel component creation.
panelbeforeshow Triggered before the new panel is displayed.
panelshow Triggered after the new panel is displayed.
panelbeforehide Triggered before the current panel is about to be closed.
panelhide Triggered after the current panel is hidden.
panelchange Triggered after switching from the current panel to the new panel.
-	
-
-Where to Go Next
-
-	Widget Reference
-	
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under HTML Examples
 
-progressbar type
+bar type
 
 -<div class="ui-progress" data-type="progressbar"></div>
+<div class="ui-progress" data-type="bar"></div>
 
 
 activitybar type
@@ -67,10 +67,10 @@
 <div class="ui-progress" data-type="activitybar"></div>
 

 
-progresscircle type
+circle type
 
 -<div class="ui-progress" data-type="progresscircle"></div>
+<div class="ui-progress" data-type="circle"></div>
 
 
 activitycircle type
@@ -83,7 +83,7 @@
 
 Manual Constructor
 
-To manually create a button component, use the component constructor from the tau namespace:
+To manually create a progress component, use the component constructor from the tau namespace:
 
 <div id="progress"></div>
 <script>
@@ -111,20 +111,42 @@
 		
 			
 				data-type
-				"progressbar" | "progresscircle" |

+				"bar" | "circle" |

 					"activitybar" | "activitycircle"
 				"progressbar"
 				Sets type of progress component.
 			
+            
+                data-size
+                "small" | "medium" |

+                    "large" | "full"
+                "medium"
+                Sets size of progress component.

+                    (It used only with "circle" and "activitycircle" type)
+            
 		
 			
 				data-value
 				Number
-				0
-				Sets default value or progress component.
+				100
+				Sets default value of progress component.
 			
-		
-		
+            
+                data-max
+                Number
+                100
+                Sets default max value of progress component.
+            
+
+            
+                data-min
+                Number
+                0
+                Sets default min value of progress component.
+            
+
+
+        
 	
 
 Methods
@@ -151,20 +173,6 @@
 		
 		
 		
-			
-				
-					
-						disable (  ) 
-					
-					Disable Progress component.
-				
-
-				
-					
-						enable (  ) 
-					
-					Enable Progress component.
-				
 
 				
 					
@@ -190,97 +198,7 @@
 
 		
 	
-	
-
-				disable
-				
-					
-						Disable Progress component.
-					
-					
-						disable ( ) 
-					
-					
-						
-						
-					
-
-					
-						Return value:
-
-						
-							
-							
-								
-								
-							
-							
-								
-								
-							
-							
-						Type Description
Progress Returns this.
-					
-						
-							Code
-								example:

-							<script>
-   var element = document.getElementById("progress"),
-       progress = tau.widget.Progress(element);
-
-   progress.disable();
-</script>
-
-						
-
-				
-
-		enable
-		
-			
-				Enable Progress component.
-			
-			
-				enable ( ) 
-			
-			
-				
-				
-			
-
-			
-				Return value:
-
-				
-					
-					
-						
-						
-					
-					
-						
-						
-					
-					
-				Type Description
Progress Returns this.
-			
-			
-							Code
-								example:

-							<script>
-   var element = document.getElementById("progress"),
-       progress = tau.widget.Progress(element);
 
-   progress.enable();
-</script>
-
-			
-
-		
 
 		value
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Slider.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Slider.htm
index 104d922..a9ae396 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Slider.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Slider.htm
@@ -48,7 +48,7 @@
 
 To manually create a slider component, use the component constructor from the tau namespace
 
-<input id="slider">
+<input id="slider" />
 <script>
    var sliderElement = document.getElementById("slider"),
        slider = tau.widget.Slider(sliderElement);
@@ -61,7 +61,7 @@
 
 To create slider input:
 
-<input type="range" name="slider-1" id="slider" value="60" min="0" max="100">
+<input type="range" name="slider-1" id="slider" value="60" min="0" max="100" />
 
 
 	Options
@@ -105,8 +105,7 @@
 
 To call a method on the component, use one of the existing APIs:
 
-<input id="slider" type="range" name="slider"
-       value="60" min="0" max="100">
+<input id="slider" type="range" name="slider" value="60" min="0" max="100" />
 <script>
    var slider = document.getElementById("slider"),
        slider = tau.widget.Slider(slider);
@@ -183,14 +182,9 @@
 						
 							
The method sets the disabled attribute for the slider and changes the look of the slider to the disabled state.
 
-
-
-
 						
 					

-					
-					
-					
+
 					
 						Return value:
 						
@@ -206,10 +200,7 @@
 								
 								
 							
-						
-						
 					
-					
 						
 							Code
 								example:

@@ -223,23 +214,9 @@
 </script>
 

 						
-
+
 				
-			
-		
-			
+
 				enable
 				
@@ -259,9 +236,7 @@
 
 						
 					
-					
-					
-					
+
 					
 						Return value:
 						
@@ -277,8 +252,7 @@
 								
 								
 							
-						
-						
+
 					
 					
 						
@@ -294,31 +268,9 @@
 </script>
 

 						
-
+
 				
-			
-		
-			
 
-	
-			
-		
-			
-	
-		
-			
 				refresh
 				
@@ -375,19 +327,7 @@
 </script>

- + @@ -452,22 +392,7 @@ </script> - + diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm index 3f1eafe..62b075e 100644 --- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm +++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Tabs.htm @@ -10,7 +10,18 @@

Tabs

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

Note
This component is just a controller. So, please use this component with tabbar and SectionChanger component.

Table of Contents

HTML Examples

- <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>
+Using tabbar in Tabs component
+To use Tabs component, it need tabbar as child.

+When define tabbar in HTML, just add class="ui-tabbar". Please refer following code:
+<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>
+
+
+Using tabbar and SectionChanger in Tabs component
+<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>
 
 
 Manual constructor
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm
index 8a872d6..23ab8d3 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_TextEnveloper.htm
@@ -70,11 +70,6 @@ If you want to delete word block, you should press the backspace key. If you foc
 
 <div class="ui-text-enveloper"></div>
 
-Create simple TextEnveloper from div using data-role:
-
-<div data-role="textenveloper"></div>
-
-
 
 Manual constructor
 
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
index 6148098..795aa56 100644
--- 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
@@ -18,8 +18,6 @@ TextInput component is decorator for input elements.
 
 	
 		Default selectors
-	
-		Manual constructor
 
 		HTML Examples
 	
@@ -33,51 +31,25 @@ TextInput component is decorator for input elements.
 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
+INPUT with type "text" or "number" or "password" or "email" or "url" or "tel"
 TEXTAREA
-HTML elements with class ui-text-input
+INPUT elements with class ui-text-input
 
 
-Manual constructor
-
-For manual creation of TextInput component you can use constructor 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
+Create simple text input on INPUT element with clear button
 
-    <form>
-        <label for="text-1">Text input:</label>
-        <input type="text" name="text-1" id="text-1" value="">
-    </form>
+<label for="texttype">Text Input:</label>
+<input type="text" name="texttype" id="texttype" placeholder="Input text here" data-clear-btn="true"/>
 
 
 Create simple text input on TEXTAREA element
 
-    <form>
-        <label for="text-1">Text input:</label>
-        <textarea name="text-1" id="text-1"></textarea>
-    </form>
+<label for="textarea">Text Area:</label>
+<textarea type="text" name="textarea" id="textarea" placeholder="Input text here"></textarea>
 
 
-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
 
@@ -187,13 +159,12 @@ type
 							Code
 								example:

 							-<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>
 
 						
@@ -245,13 +216,12 @@ type
 							Code
 								example:

 							-<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>
 
 						
@@ -262,11 +232,6 @@ type
 		
 	
 
-Where to Go Next
-
-	UI Component Reference
-	
-
 
 	
 	Except as noted, this content - excluding the Code Examples - is licensed under 
 	
 		selector with select[data-role="slider"] has been DEPRECATED since Tizen 2.4.

-			To support Backward compitablity, please import tau.support-2.3.js.
+			To support Backward compatibility, please import tau.support-2.3.js.
 	
 	
 
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/mobile_component_list.htm
similarity index 96%
rename from org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm
rename to org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_component_list.htm
index 1cd837a..cc99160 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/mobile_component_list.htm
@@ -86,8 +86,8 @@
 		
 
 		
-			Navigation Bar
-			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.
+			Navigation
+			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.
 			2.3
 		
 
diff --git a/org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm b/org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm
similarity index 100%
rename from org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/widget_reference.htm
rename to org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_component_list.htm
diff --git a/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm b/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm
index 83d69f7..ffb4d66 100644
--- a/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm
+++ b/org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm
@@ -45,11 +45,11 @@
 			 References of base APIs to organize and managing application.
 		 
 		 
-			 Mobile UI Components
+			 Mobile UI Components
 			 References of UI Components for Mobile profile.
 		 
 		 
-			 Wearable UI Components
+			 Wearable UI Components
 			 References of UI Components for Wearable profile.
 		 
 		 
@@ -60,6 +60,10 @@
 			 Globalization
 			 References of Globalization utility library.
 		 
+         
+             Animation
+             References of Animation APIs.
+         
 
 		 
 	 
diff --git a/org.tizen.web.apireference/index.xml b/org.tizen.web.apireference/index.xml
index 4b4ef5f..8f06d29 100644
--- a/org.tizen.web.apireference/index.xml
+++ b/org.tizen.web.apireference/index.xml
@@ -122,26 +122,32 @@
 				
 				
 			
-			
+			
 				
 				
+                
 				
 				
 				
+                
+                
 				
-				
-				
+				
+				
 				
+                
 				
 				
 				
 				
 				
 				
+                
 				
+                
 				
 			
-			
+