<li><a href="web/tau/footerbutton_ww.htm">Footer Button</a></li>
<li><a href="web/tau/thumbnail_ww.htm">Thumbnail</a></li>
<li><a href="web/tau/popup_ww.htm">Popup</a></li>
+ <li><a href="web/tau/indexscrollbar_ww.htm">Index Scroll Bar</a></li>
</ul>
</li>
<li><a href="web/tau/accessibility_w.htm">Accessibility</a></li>
<tr>
<td><a href="popup_ww.htm">Popup</a></td>
<td>Shows how you can create a popup component.</td>
- </tr>
+ </tr>
+ <tr>
+ <td><a href="indexscrollbar_ww.htm">Index Scroll Bar</a></td>
+ <td>Shows how you can create a index scroll bar component.</td>
+ </tr>
</tbody>
</table>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_selector.htm">Selector API</a></li>
</ul>
</div></div>
</div>
<p>When there are multiple buttons, the buttons except for the first button use drawer in Circular UI.</p>
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="bottomButtonWithMorePage" >
- <header class="ui-header">
- <h2 class="ui-title">Multiple Buttons</h2>
+<div class="ui-page ui-page-active" id="bottomButtonWithMorePage" >
+ <header class="ui-header">
+ <h2 class="ui-title">Multiple Buttons</h2>
</header>
- <div class="ui-content content-padding">
- It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+ <div class="ui-content content-padding">
+ It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
- <a class="drawer-handler"></a>
-
- <!-- Circle Profile -->
- <div id="moreoptionsDrawer" class="ui-drawer drawer-elem" data-drawer-target="#bottomButtonWithMorePage" data-position="right" data-enable="true" data-drag-edge="1">
- <div id="moreoptionsSectionChanger" class="ui-section-changer">
- <div>
- <section>
- <button class="option-button">2</button>
- </section>
- <section>
- <button class="option-button">3</button>
- </section>
- </div>
+ <a class="drawer-handler"></a>
+
+ <!-- Circle Profile -->
+ <div id="moreoptionsDrawer" class="ui-drawer drawer-elem" data-drawer-target="#bottomButtonWithMorePage" data-position="right" data-enable="true" data-drag-edge="1">
+ <div id="selector" class="ui-selector">
+ <div class="ui-item show-icon" data-title="2"></div>
+ <div class="ui-item human-icon" data-title="3"></div>
</div>
</div>
- <footer class="ui-footer ui-grid-col-3 ui-bottom-button">
- <a href="#" class="ui-btn">1</a>
- <a href="#" class="ui-btn">2</a>
- <a href="#" class="ui-btn">3</a>
+ <footer class="ui-footer ui-grid-col-3 ui-bottom-button">
+ <a href="#" class="ui-btn">1</a>
+ <a href="#" class="ui-btn">2</a>
+ <a href="#" class="ui-btn">3</a>
</footer>
</div>
</pre>
<li>Edit the CSS code to set the visual style of the buttons:
<pre class="prettyprint">
-.drawer-elem
-{
- display: none;
+.drawer-elem {
+ display: none;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- .drawer-handler
- {
+@media all and (-tizen-geometric-shape: circle) {
+ .drawer-handler {
width:24px;
- height: 115px;
- position: fixed;
- top: 122px;
- right: 0;
- color: transparent;
- background-color: #a4a4a4;
- -webkit-mask-image: url(/*path of the image*/);
- -webkit-mask-size: 18px 36px;
- -webkit-mask-repeat: no-repeat;
- -webkit-mask-position: 0 40px;
- }
- .drawer-elem
- {
- display: block;
- background-color: rgba(255, 255, 255, 0.1);
- border-radius: 100%;
- }
- .sections,
- .options
- {
- text-align: center;
+ height: 115px;
+ position: fixed;
+ top: 122px;
+ right: 0;
+ color: transparent;
+ background-color: #a4a4a4;
+ -webkit-mask-image: url(/*path of the image*/);
+ -webkit-mask-size: 18px 36px;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: 0 40px;
}
- .option-button
- {
- width: 158px;
- height: 158px;
- background-color: #a4a4a4;
- position: relative;
- left: 50%;
- transform: translate3d(-50%, -50%, 0);
- top: 50%;
- border-radius: 50%;
- border: none;
- text-align: center;
- line-height: 158px;
- -webkit-appearance: none;
- }
-
- .ui-bottom-button a + a
- {
- display: none;
+ .ui-bottom-button a + a {
+ display: none;
}
}
</pre>
</li>
<li>Edit the JavaScript code to manage the footer button events and other functionalities:
<pre class="prettyprint">
-(function()
-{
- var page = document.querySelector("#bottomButtonWithMorePage"),
- drawer = page.querySelector("#moreoptionsDrawer"),
- handler = page.querySelector(".ui-more"),
- drawerMoreHelper;
-
- page.addEventListener("pagebeforeshow", function()
- {
- if (tau.support.shape.circle)
- {
- drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer,
- {
- handler: ".drawer-handler",
+(function(){
+ var page = document.querySelector("#bottomButtonWithMorePage"),
+ drawer = page.querySelector("#moreoptionsDrawer"),
+ handler = page.querySelector(".ui-more");
+
+ page.addEventListener( "pagebeforeshow", function() {
+ if (tau.support.shape.circle) {
+ tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: ".drawer-handler",
});
}
});
-
- page.addEventListener("pagehide", function()
- {
- if (tau.support.shape.circle)
- {
- if (drawerMoreHelper)
- {
- drawerMoreHelper.destroy();
- }
- }
- });
})();
</pre>
</li>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Index Scroll Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_circularindexscrollbar.htm">Circular Index Scroll Bar API for Wearable Web</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_indexscrollbar.htm">Index Scroll Bar API for Wearable Web</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Index Scroll Bar</h1>
+
+<p>You can create a circle/rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note" colspan="1" rowspan="1">Note</th>
+ </tr>
+ <tr>
+ <td class="note" colspan="1" rowspan="1">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following figure shows the layout of the index scroll bar in a rectangular and circular UI.</p>
+
+<p class="figure">Figure: The circle-shaped progress bar in rectangular and circular devices</p>
+ <p align="center"><img alt="index scroll bar in a rectangular device" src="../../images/rectangular_index.png" /> <img alt="Circle-shaped index scroll bar in a circular device" src="../../images/round_index.png" /></p>
+
+<p>To implement the index scroll bar:</p>
+
+<ol>
+<li>Edit the HTML code to add the component to your application screen:
+<pre class="prettyprint"><div class="ui-page ui-page-active" id="pageIndexScrollbar" >
+ <header class="ui-header ui-header-small">
+ <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
+ </header>
+ <div id="indexscrollbar"></div>
+ <section class="ui-content">
+ <ul class="ui-listview ui-snap-listview" id="list1">
+ <li class="ui-listview-divider">A</li>
+ <li>Anton</li>
+ <li class="ui-listview-divider">B</li>
+ <li>Barry</li>
+ <li>Bob</li>
+ <li class="ui-listview-divider">C</li>
+ <li>Carry</li>
+ <li class="ui-listview-divider">D</li>
+ <li>Daisy</li>
+ <li class="ui-listview-divider">E</li>
+ <li>Eric</li>
+ <li class="ui-listview-divider">F</li>
+ <li>Fay</li>
+ <li class="ui-listview-divider">G</li>
+ <li>Garry</li>
+ </ul>
+ </section>
+</div>
+</pre>
+</li>
+
+<li>Edit the JavaScript code to manage the progress bar events and other functionality:
+<p>How to create a component selectively</p>
+<pre class="prettyprint">
+var indexScrollbarElement = document.getElementById("indexscrollbar");
+
+if (!tau.support.shape.circle) {
+ // Create IndexScrollbar
+ indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
+} else {
+ // Create CircularIndexScrollbar
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
+}
+</pre>
+
+<p>How to use callback<p>
+<pre class="prettyprint">
+indexScrollbarElement.addEventListener("select", function( event ) {
+ var index = event.detail.index;
+ // do something using the index
+ console.log(index);
+});
+</pre>
+
+<p>In the following example, the list scrolls to the position of the list item defined using
+the ui-listview-divider class, selected by the index scroll bar:<br>
+(Note : In rectangular UI, touching index generates the select, but in round UI, the select occurs when using rotary.)<p>
+
+<pre class="prettyprint">
+(function() {
+ var page = document.getElementById("pageIndexScrollbar"),
+ listviewElement = document.getElementById("list1"),
+ isCircle = tau.support.shape.circle,
+ scroller,
+ indexScrollbar;
+
+ page.addEventListener("pageshow", function(ev) {
+ var indexScrollbarElement = document.getElementById("indexscrollbar"),
+ listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), // list dividers
+ dividers = {}, // collection of list dividers
+ indices = [], // index list
+ divider,
+ i, idx;
+
+ // For all list dividers,
+ for(i = 0; i < listDividers.length; i++) {
+ // Add the list divider elements to the collection
+ divider = listDividers[i];
+ idx = divider.innerText;
+ dividers[idx] = divider;
+
+ // Add the index to the index list
+ indices.push(idx);
+ }
+
+ scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+ if (!isCircle) {
+ indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
+ } else {
+ // Create IndexScrollbar
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+ // Add SnapListview item "selected" event handler.
+ listviewElement.addEventListener("selected", function (ev) {
+ var indexValue = ev.target.textContent[0];
+ indexScrollbar.value(indexValue);
+ });
+ }
+
+ // Add IndexScrollbar index "select" event handler.
+ indexScrollbarElement.addEventListener("select", function (ev) {
+ var divider,
+ idx = ev.detail.index;
+
+ divider = dividers[idx];
+ if (divider && scroller) {
+ // Scroll to the ui-listview-divider element
+ scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+ }
+ });
+ });
+
+ page.addEventListener("pagehide", function(ev) {
+ indexScrollbar.destroy();
+ });
+} ());
+</pre>
+
+</li>
+
+</ol>
+<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>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_viewSwitcher.htm">ViewSwitcher API for Wearable Web</a></li>
+ <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_selector.htm">Selector API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>More Options</h1>
-
-<p>In rectangular UI, you can implement more options by using the button and popup components. For a circular UI, use the ViewSwitcher API for implementing the more options button.</p>
+In rectangular UI, you can implement more options using button and popup components.<p>
+Circular UI provides Selector component for more options button.<p>
+The following explains how to make the more options for Circular UI.<p>
<table class="note">
<tbody>
<ol>
<li>Edit the HTML code to add the more options component to your application screen:
-<pre class="prettyprint">
-<div id="moreoptionsPage" class="ui-page">
- <link rel="stylesheet" href="./moreoptions.css">
- <header class="ui-header ui-has-more">
- <h2 class="ui-title">More Options</h2>
- <button type="button" class="ui-more ui-icon-overflow">More Options</button>
+<pre class="prettyprint"><div id="moreoptionsPage" class="ui-page">
+ <link rel="stylesheet" href="./moreoptions.css">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">More Options</h2>
+ <button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
- <div class="ui-content content-padding">
- It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
+ <div class="ui-content content-padding">
+ It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
- <!-- Rectangular Profile -->
- <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
- <div class="ui-popup-header">Options</div>
- <div class="ui-popup-content">
- <ul class="ui-listview">
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- </ul>
- </div>
+ <!-- Rectangular Profile -->
+ <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
+ <div class="ui-popup-header">Options</div>
+ <div class="ui-popup-content">
+ <ul class="ui-listview">
+ <li><a href="#">1</a></li>
+ <li><a href="#">2</a></li>
+ <li><a href="#">3</a></li>
+ </ul>
+ </div>
</div>
- <!-- Circular Profile -->
- <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
- <div id="pageIndicator" class="ui-page-indicator"></div>
- <div id="viewSwitcher" class="ui-view-switcher">
- <div class="ui-view custom-view">
- <button class="option-button">1</button>
- </div>
- <div class="ui-view custom-view ui-view-active">
- <button class="option-button">2</button>
- </div>
- <div class="ui-view custom-view">
- <button class="option-button">3</button>
- </div>
- <div class="ui-view custom-view">
- <button class="option-button">4</button>
- </div>
- <div class="ui-view custom-view">
- <button class="option-button">5</button>
- </div>
+ <!-- Circular Profile -->
+ <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
+ <div id="selector" class="ui-selector">
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item x-icon" data-title="X Icon"></div>
+ <div class="ui-item fail-icon" data-title="Fail"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
+ <div class="ui-item delete-icon" data-title="Delete"></div>
+ <div class="ui-item show-icon" data-title="Show"></div>
+ <div class="ui-item human-icon" data-title="Human"></div>
</div>
</div>
</div>
<li>Edit the CSS code to set the visual style of the buttons:
<pre class="prettyprint">
-#moreoptionsDrawer
-{
- display: none;
+#moreoptionsDrawer {
+ display: none;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- #moreoptionsDrawer
- {
- display: block;
- background-color: rgba(255, 255, 255, 0.1);
- border-radius: 100%;
- }
- #moreoptionsPopup
- {
- display: none;
+@media all and (-tizen-geometric-shape: circle) {
+ #moreoptionsDrawer {
+ display: block;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 100%;
}
- .sections,
- .options
- {
- text-align: center;
- }
- .option-button
- {
- width: 100%;
- height: 100%;
- position: relative;
- text-align: center;
- line-height: 140px;
- -webkit-appearance: none;
- background-color: transparent;
- border-radius: 50%;
- border: 0;
- color: #000000;
- }
- .ui-view-switcher .ui-view.custom-view
- {
- width: 140px;
- height: 140px;
- border-radius: 50%;
- top: -webkit-calc(50% - 70px);
+ #moreoptionsPopup {
+ display: none;
}
}
</pre>
<li>Edit the JavaScript code to manage the option button events and other functionality:
<pre class="prettyprint">
-(function()
-{
- var page = document.querySelector("#moreoptionsPage"),
- popup = page.querySelector("#moreoptionsPopup"),
- drawer = page.querySelector("#moreoptionsDrawer"),
- handler = page.querySelector(".ui-more"),
- elPageIndicator = page.querySelector("#pageIndicator"),
- views = page.querySelectorAll(".ui-view"),
- viewSwitcherElement = page.querySelector("#viewSwitcher"),
- drawerMoreHelper;
-
- page.addEventListener("pagebeforeshow", function()
- {
- var popupWidget,
- pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 }),
- lastActiveIndex,
- viewSwitcher;
-
- pageIndicator.setActive(1);
-
- if (tau.support.shape.circle)
- {
- drawerMoreHelper = tau.helper.DrawerMoreStyle.create(drawer,
- {
- handler: ".ui-more"
- });
- viewSwitcher = tau.widget.ViewSwitcher(viewSwitcherElement);
- /* Using a rotary event */
- document.addEventListener("rotarydetent", function(event)
- {
- var direction = event.detail.direction,
- activeIndex = viewSwitcher.getActiveIndex();
-
- event.stopPropagation();
- if(direction === "CW")
- {
- /* Right */
- if (activeIndex < views.length - 1)
- {
- viewSwitcher.setActiveIndex(activeIndex + 1);
- }
- }
- else
- {
- /* Left */
- if (activeIndex > 0)
- {
- viewSwitcher.setActiveIndex(activeIndex - 1);
- }
- }
- lastActiveIndex = activeIndex;
- });
- }
- else
- {
- /* Shape is rect */
- popupWidget = tau.widget.Popup(popup);
- tau.event.on(handler, "click", function(e)
- {
- popupWidget.open();
- }, false);
+(function(){
+ var page = document.querySelector("#moreoptionsPage"),
+ popup = page.querySelector("#moreoptionsPopup"),
+ handler = page.querySelector(".ui-more"),
+ drawer = page.querySelector("#moreoptionsDrawer"),
+ selector = page.querySelector("#selector"),
+ helper,
+ clickHandlerBound;
+
+ function clickHandler(event) {
+ tau.openPopup(popup);
+ }
+ page.addEventListener( "pagebeforeshow", function() {
+ if (tau.support.shape.circle) {
+ helper = tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: ".drawer-handler"
+ });
+ } else {
+ // Shape is square
+ clickHandlerBound = clickHandler.bind(null);
+ handler.addEventListener("click", clickHandlerBound);
}
-
- viewSwitcherElement.addEventListener("viewchange", function(event)
- {
- var index = event.detail.index;
- if (index < 0 || index > views.length - 1)
- {
- return;
- }
- pageIndicator.setActive(event.detail.index);
- }, false);
});
-
- page.addEventListener("pagehide", function()
- {
- if (tau.support.shape.circle)
- {
- if (drawerMoreHelper)
- {
- drawerMoreHelper.destroy();
- }
+ page.addEventListener( "pagebeforehide", function() {
+ if (tau.support.shape.circle) {
+ handler.removeEventListener("click", clickHandlerBound);
+ helper.destroy();
}
});
})();
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<topic href="html/web/tau/footerbutton_ww.htm" label="Footer Button"></topic>
<topic href="html/web/tau/thumbnail_ww.htm" label="Thumbnail"></topic>
<topic href="html/web/tau/popup_ww.htm" label="Popup"></topic>
+ <topic href="html/web/tau/indexscrollbar_ww.htm" label="Index Scroll Bar"></topic>
</topic>
<topic href="html/web/tau/accessibility_w.htm" label="Accessibility"></topic>
<topic href="html/web/tau/globalization_w.htm" label="Globalization"></topic>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_button.htm">Button</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_checkbox.htm">CheckboxRadio</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm">CircleProgressBar</a></li>
+ <li><a href="ui_fw_api/Wearable_UIComponents/wearable_circularindexscrollbar.htm">CircularIndexScrollBar</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_drawer.htm">Drawer</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_indexscrollbar.htm">IndexScrollBar</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_list.htm">List</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_processing.htm">Processing</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_progress.htm">Progress</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm">SectionChanger</a></li>
+ <li><a href="ui_fw_api/Wearable_UIComponents/wearable_selector.htm">Selector</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_slider.htm">Slider</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm">SnapListView</a></li>
<li><a href="ui_fw_api/Wearable_UIComponents/wearable_swipelist.htm">SwipeList</a></li>
<td class="note">This component is supported since <strong>2.3</strong>.</td>
</tr>
<tr>
- <td class="note">This component is optimized for round UI. The component may not be shown properly in rectangular UI.</td>
+ <td class="note">This component is optimized for circular UI. The component may not be shown properly in rectangular UI.</td>
</tr>
</tbody>
</table>
--- /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>Circular Index Scroll Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Circular Index Scroll Bar</h1>
+
+<p>Circular index scroll bar component shows on the screen a circular indicator with an index and support to scroll.</p>
+<p>If you spin the rotary quickly, an indicator will be displayed and you can move in an index unit.</p>
+<p>The indicator will disappear if no rotary action is detected for a second.</p>
+<p>This component fires a select event when the index characters are selected.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component is supported since <strong>2.3</strong>.</td>
+ </tr>
+ <tr>
+ <td class="note">This component is optimized for circular UI. The component may not be shown properly in rectangular UI.</td>
+ </tr>
+ <tr>
+ <td class="note">If you want information for support to both circular and rectangular UI, see <a href="../../../../org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm">here</a></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#manual-constructor0.6990520032122731">How to create circular index scroll bar</a>
+
+ </li>
+
+ <li><a href="#options-list">Options</a>
+
+ </li>
+
+ <li><a href="#events-list">Events</a>
+
+ </li>
+
+ <li><a href="#methods-list">Methods</a>
+
+ <ol class="toc">
+
+ <li><a href="#method-value">value</a>
+ </li>
+
+ </ol>
+
+ </li>
+
+</ol>
+
+
+<h2><a id='manual-constructor0.6990520032122731'></a>How to create circular index scroll bar</h2>
+
+<p>For manual creation of circular index scroll bar, you can use constructor from <strong>tau</strong> namespace:</p>
+
+<pre class="prettyprint">var circularindexElement = document.getElementById('circularindexscrollbar'),
+ circularindexscrollbar = tau.widget.CircularIndexScrollbar(circularindexElement, {index: "A,B,C"});
+</pre>
+
+<p>Constructor has one 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.</p>
+
+<p>To add a circular index scroll bar component to the application, use the following code:</p>
+
+<pre class="prettyprint"> <div id="indexscrollbar" class="ui-circularindexscrollbar" data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"></div>
+ <script>
+ (function() {
+ var elem = document.getElementById("indexscrollbar");
+ tau.widget.CircularIndexScrollbar(elem);
+ elem.addEventListener("select", function( event ) {
+ var index = event.detail.index;
+ // Print selected index
+ console.log(index);
+ });
+ }());
+ </script>
+</pre>
+
+<p>The index value can be retrieved by accessing event.detail.index property.</p>
+
+<p>In the following example, the list scrolls to the position of the list item defined using the li-divider class which is selected by the circular index scroll bar:</p>
+
+<pre class="prettyprint">
+ <div id="pageIndexScrollbar" class="ui-page">
+ <header class="ui-header">
+ <h2 class="ui-title">CircularIndexScrollbar</h2>
+ </header>
+ <div id="indexscrollbar" class="ui-circularindexscrollbar"></div>
+ <section class="ui-content">
+ <ul class="ui-listview" id="list1">
+ <li class="li-divider">A</li>
+ <li>Anton</li>
+ <li>Arabella</li>
+ <li>Art</li>
+ <li class="li-divider">B</li>
+ <li>Barry</li>
+ <li>Bibi</li>
+ <li>Billy</li>
+ <li>Bob</li>
+ <li class="li-divider">D</li>
+ <li>Daisy</li>
+ <li>Derek</li>
+ <li>Desmond</li>
+ </ul>
+ </section>
+</div>
+<script>
+(function() {
+ var page = document.getElementById("pageIndexScrollbar"),
+ indexScrollbar;
+
+ page.addEventListener("pageshow", function(ev) {
+ var indexScrollbarElement = document.getElementById("indexscrollbar"),
+ listviewElement = document.getElementById("list1"), // list
+ listDividers = listviewElement.getElementsByClassName("li-divider"), // list dividers
+ dividers = {}, // collection of list dividers
+ indices = [], // index list
+ scroller,
+ divider,
+ i, idx;
+
+ // For all list dividers,
+ for(i = 0; i < listDividers.length; i++) {
+ // Add the list divider elements to the collection
+ divider = listDividers[i];
+ idx = divider.innerText;
+ dividers[idx] = divider;
+
+ // Add the index to the index list
+ indices.push(idx);
+ }
+
+ scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+ // Create CircularIndexScrollbar
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+ // Add SnapListview item "selected" event handler.
+ // You should update the information for current index
+ listviewElement.addEventListener("selected", function (ev) {
+ var indexValue = ev.target.textContent[0];
+ indexScrollbar.value(indexValue);
+ });
+
+ // Add IndexScrollbar index "select" event handler.
+ indexScrollbarElement.addEventListener("select", function (ev) {
+ var divider,
+ idx = ev.detail.index;
+
+ divider = dividers[idx];
+ if(divider && scroller) {
+ // Scroll to the li-divider element
+ scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+ }
+ });
+ });
+
+ page.addEventListener("pagehide", function(ev) {
+ indexScrollbar.destroy();
+ });
+} ());
+</script>
+</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">delimiter</span></td>
+ <td class="option">string</td>
+ <td class="option">","</td>
+ <td class="option">delimiter in index</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">index</span></td>
+ <td class="option">string | Array</td>
+ <td class="option">"A","B","C","D","E",(...),"V","W","X","Y","Z","1"</td>
+ <td class="option">indices list</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+ <h2><a id="events-list"></a>Events</h2>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">select</span></td>
+ <td><p>Event triggered after select index by user<p>This event has "detail" object and there is "index" property in the "detail"<p>
+ detail.index provides information for selected index.</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">string <a href="#method-value">value</a> ( ) </pre>
+ </td>
+ <td><p>Get or Set index of the circular index scroll bar</p></td>
+ </tr>
+
+
+
+
+ </tbody>
+ </table>
+ <dl>
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-value">value</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Get or Set index of the circular index scroll bar</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">string value ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <p>Return current index or set the index</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>string</td>
+ <td>In get mode return current index value</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
+ <pre name="code" class="examplecode
+ prettyprint">
+ <div id="circularindexscrollbar"></div>
+ <script>
+ var circularindexElement = document.getElementById("circularindexscrollbar"),
+ circularIndexScrollbar = tau.widget.CircularIndexScrollbar(circularindexElement),
+ // return current index value
+ value = circularIndexScrollbar.value();
+ // sets the index value
+ circularIndexScrollbar.value("C");
+ </script>
+</pre>
+ </div>
+
+ </dd>
+
+ </dl>
+
+
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<!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>Index Scroll Bar</title>
+<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>Index Scroll Bar</title>
</head>
<body onload="prettyPrint()" id="content">
<h1>Index Scroll Bar</h1>
-<p>The index scroll bar component shows on the screen a scrollbar with indices, and fires a <span style="font-family: Courier New,Courier,monospace">select</span> event when the index characters are clicked. The following table describes the supported index scroll bar APIs.</p>
+<p>The index scroll bar component shows on the screen a scroll bar with indices, and fires a <span style="font-family: Courier New,Courier,monospace">select</span> event when the index characters are clicked. The following table describes the supported index scroll bar APIs.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This component is released for <strong>2.3 rectangular UI</strong>. When you create this component in round screen, layout can be shown broken because screen hide index scrollbar. In that case, we recommend to use <a href="widget_circularindexscrollbar.htm">Circular IndexScrollbar</a>.</td>
+ <td class="note">This component is released for <strong>2.3 rectangular UI</strong>. When you create this component in circular screen, layout can be shown broken because screen hide index scroll bar. In that case, we recommend to use <a href="wearable_circularindexscrollbar.htm">Circular Index Scroll Bar</a>.</td>
</tr>
</tbody>
</table>
<h2>Table of Contents</h2>
<ol class="toc">
- <li><a href="#manual-constructor0.6990520032122731">Manual constructor</a>
+ <li><a href="#manual-constructor0.6990520032122731">How to create index scroll bar</a>
</li>
</ol>
-<h2><a id='manual-constructor0.6990520032122731'></a>Manual constructor</h2>
+<h2><a id='manual-constructor0.6990520032122731'></a>How to create index scroll bar</h2>
-<p>For manual creation of IndexScrollbar, you can use constructor from <strong>tau</strong> namespace:</p>
+<p>For manual creation of Index Scroll Bar, you can use constructor from <strong>tau</strong> namespace:</p>
<pre class="prettyprint">var indexElement = document.getElementById('indexscrollbar'),
indexscrollbar = tau.widget.IndexScrollbar(indexElement);
</pre>
-<p>To add an IndexScrollbar component to the application, use the following code:</p>
+<p>To add an index scroll bar component to the application, use the following code:</p>
<pre class="prettyprint">
<div id="foo" class="ui-indexscrollbar"
data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"></div>
indices.push(idx);
}
- /* Change the data-index attribute to the indexscrollbar element */
- /* before initializing IndexScrollbar component */
+ /* Change the data-index attribute to the index scroll bar element */
+ /* before initializing index scroll bar component */
elem.setAttribute("data-index", indices.join(","));
/* Create index scroll bar */
keyItem: keyItem
};
}
- /* Update the data-index attribute to the indexscrollbar element, with the index list above */
+ /* Update the data-index attribute to the index scroll bar element, with the index list above */
elisb.setAttribute("data-index", indexData.firstIndex);
- /* Create IndexScrollbar */
+ /* Create index scroll bar */
isb = new tau.IndexScrollbar(elisb,
{
index: indexData.firstIndex, supplementaryIndex: function(firstIndex)
<td class="option"><span style="font-family: Courier New,Courier,monospace">moreChar</span></td>
<td class="option">string</td>
<td class="option">"*"</td>
- <td class="option">more character in indexscrollbar</td>
+ <td class="option">more character in index scroll bar</td>
</tr>
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">delimiter</span></td>
</table>
+
+
+
+
+
<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>
<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>PageIndicator</title>
+ <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>Page Indicator</title>
</head>
<body onload="prettyPrint()" id="content">
-<h1>PageIndicator</h1>
+<h1>Page Indicator</h1>
-<p>PageIndicator component presents as a dot-typed indicator.<br>
-The highlighted dots represent the corresponing active pages.</p>
-<p>According to option, the maximum number of dots and the number of pages to be linked can be set.
-<br>If the number of linked pages is more than dots which can be displayed, a central dot is assigned to multiple pages.</p>
+<p>Page indicator component presents as a dot-typed indicator.</p>
+<p>The highlighted dots represent the corresponing active pages.</p>
+<p>According to option, the maximum number of dots and the number of pages to be linked can be set.</p>
+<p>If the number of linked pages is more than dots which can be displayed, a central dot is assigned to multiple pages.</p>
<table class="note">
<tbody>
<h2>Table of Contents</h2>
<ol class="toc">
- <li><a href="#manual-constructor">How to Create PageIndicator</a>
+ <li><a href="#manual-constructor">How to Create page indicator</a>
</li>
</ol>
-<h2><a id='manual-constructor'></a>How to Create PageIndicator</h2>
+<h2><a id='manual-constructor'></a>How to Create page indicator</h2>
-<p>For manual creation of PageIndicator, you can use constructor from <strong>tau</strong> namespace:</p>
+<p>For manual creation of page indicator, 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 });
<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>
-<p>To add an PageIndicator component to the application, use the following code:</p>
+<p>To add an page indicator component to the application, use the following code:</p>
<pre class="prettyprint"> <div id="pageIndicator" class="ui-page-indicator"></div>
<script>
<p>index value means index of active page.</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>
+<p>In the following example, the change of page is indicated in page indicator component by using page indicator with <a href="widget_section_changer.htm">section changer</a> component.</p>
<pre class="prettyprint">
<div id="pageIndicatorPage" class="ui-page">
<tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">maxPage</span></td>
<td class="option">number</td>
- <td class="option">5</td>
+ <td class="option">5(linear), 60(circular)</td>
<td class="option"><p>the maximum number of pages(dots) which can be displayed on screen</p></td>
</tr>
<td class="option">the number of pages to be linked <strong>(mandatory)</strong></td>
</tr>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">layout</span></td>
+ <td class="option">string</td>
+ <td class="option">"linear"</td>
+ <td class="option">layout type of page indicator. The component supports "linear" and "circular".</strong></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">intervalAngle</span></td>
+ <td class="option">number</td>
+ <td class="option">6</td>
+ <td class="option">angle between each dot in page indicator. This option is used only for circular type.</strong></td>
+ </tr>
+
+
</tbody>
</table>
<br>
--- /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>Selector</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Selector</h1>
+
+<p>Selector is component for select specific item to use various methods that drag, click and rotary.<br>
+Selector component has been used in more options commonly but If you want to use other situation, you can use this component as standalone component in everywhere.<br>
+Selector component was consisted as selector element, indicator, indicator arrow and item elements.<br>
+Each items can have the specific degree, radius and class. Item must have a class for selector query the items. Default selector is '.ui-item' but If you want to change this selector, you can set the custom selector to use itemSelector option.<br>
+Selector component has made layers automatically. Layer has items and you can set items number on one layer.<br>
+Indicator is indicator that located center of Selector. TAU provide default indicator style and function. But, If you want to change indicator style and function, you can make the custom indicator and set your indicator for operate with Selector.<br>
+Indicator arrow is special indicator style that has the arrow. It is used for provide more correct indicate information to user. Also, you can make the custom indicator arrow and set your custom indicator arrow for operate with Selector. Selector component control arrow's rotate to indicate active item.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#html-example0.9038220448419452">How to Create Selector</a>
+
+ </li>
+
+ <li><a href="#options0.08969108131714165">Options</a>
+
+ </li>
+
+ <li><a href="#events-list">Events</a>
+
+ </li>
+
+ <li><a href="#methods-list">Methods</a>
+
+ <ol class="toc">
+
+ <li><a href="#method-changeItem">changeItem</a>
+ </li>
+
+ <li><a href="#method-addItem">addItem</a>
+ </li>
+
+ <li><a href="#method-removeItem">removeItem</a>
+ </li>
+
+ </ol>
+
+ </li>
+
+</ol>
+
+<h2><a id='html-example0.9038220448419452'>How to Create Selector</a></h2>
+<h3>HTML example</h3>
+
+<pre class="prettyprint"> <div class="ui-page ui-page-active" id="main">
+ <div id="selector" class="ui-selector">
+ <div class="ui-item ui-show-icon" data-title="Show"></div>
+ <div class="ui-item ui-human-icon" data-title="Human"></div>
+ <div class="ui-item ui-delete-icon" data-title="Delete"></div>
+ <div class="ui-item ui-show-icon" data-title="Show"></div>
+ <div class="ui-item ui-human-icon" data-title="Human"></div>
+ <div class="ui-item ui-delete-icon" data-title="Delete"></div>
+ <div class="ui-item ui-x-icon" data-title="X Icon"></div>
+ <div class="ui-item ui-fail-icon" data-title="Fail"></div>
+ <div class="ui-item ui-show-icon" data-title="Show"></div>
+ <div class="ui-item ui-human-icon" data-title="Human"></div>
+ <div class="ui-item ui-delete-icon" data-title="Delete"></div>
+ </div>
+ </div>
+</pre>
+
+<h3><a id='manual-constructor0.33475646935403347'></a>Manual constructor</h3>
+
+<pre class="prettyprint">
+(function() {
+ var page = document.getElementById("selectorPage"),
+ selector = document.getElementById("selector"),
+ clickBound;
+
+ function onClick(event) {
+ var activeItem = selector.querySelector(".ui-item-active");
+ //console.log(activeItem.getAttribute("data-title"));
+ }
+ page.addEventListener("pagebeforeshow", function() {
+ clickBound = onClick.bind(null);
+ tau.widget.Selector(selector);
+ selector.addEventListener("click", clickBound, false);
+ });
+ page.addEventListener("pagebeforehide", function() {
+ selector.removeEventListener("click", clickBound, false);
+ });
+})();
+</pre>
+
+<h2><a id='options0.08969108131714165'></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-item-selector</span></td>
+ <td class="option">String</td>
+ <td class="option">".ui-item"</td>
+ <td class="option"><p>Selector item selector that style is css selector.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-item-degree</span></td>
+ <td class="option">Number</td>
+ <td class="option">30</td>
+ <td class="option">The angle between each items.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-item-radius</span></td>
+ <td class="option">Number</td>
+ <td class="option">-1</td>
+ <td class="option">The radius between item and center. Default value is determined by Selector layout.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-indicator-selector</span></td>
+ <td class="option">String</td>
+ <td class="option">".ui-selector-indicator"</td>
+ <td class="option">Selector indicator selector that style is css selector.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-indicator-arrow-selector</span></td>
+ <td class="option">String</td>
+ <td class="option">".ui-selector-indicator-arrow"</td>
+ <td class="option">Selector indicator arrow selector that style is css style..</td>
+ </tr>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-indicator-auto-control</span></td>
+ <td class="option">Boolean</td>
+ <td class="option">true</td>
+ <td class="option">Indicator auto control switch. If you want to control your indicator manually, change this options to false.</td>
+ </tr>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-max-item-number</span></td>
+ <td class="option">Nubmer</td>
+ <td class="option">11</td>
+ <td class="option">Max item number on one layer. If you change the itemDegree, we recommend to consider to modify this value for fit your Selector layout.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2><a id="events-list"></a>Events</h2>
+
+ <table>
+ <tbody>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">selectoritemchange</span></td>
+ <td><p>Triggered when the active item is changed. Target is active item element.<br />This event has detail information.<br />- layer: Layer element on active item<br />- layerIndex: Layer's index on active item<br />- index: Item index on layer.<br />- title: If Item has 'data-title' attribute, this value is that.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">selectorlayerchange</span></td>
+ <td><p>Triggered when the active layer is changed. Target is active layer element.<br />This event has detail information.<br />- index: Layer index.</p></td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+
+ <h2><a id="methods-list"></a>Methods</h2>
+
+ <h3>Summary</h3>
+ <table class="informaltable">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-changeItem">changeItem</a> ( Number index ) </pre>
+ </td>
+ <td><p>Change active item on active layer</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-addItem">addItem</a> ( HTMLElement item, Number index ) </pre>
+ </td>
+ <td><p>Add new item</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-removeItem">removeItem</a> ( Number index ) </pre>
+ </td>
+ <td><p>Remove item on specific layer</p></td>
+ </tr>
+ </tbody>
+ </table>
+ <dl>
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-changeItem">changeItem</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Change active item on active layer</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">changeItem ( Number index) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+ <td>Number</td>
+ <td>required</td>
+ <td></td>
+ <td></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-addItem">addItem</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Add new item</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">addItem ( HTMLElement item, Number index) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">item</span></td>
+ <td>HTMLElement</td>
+ <td>required</td>
+ <td></td>
+ <td></td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+ <td>Number</td>
+ <td>optional</td>
+ <td>Last index</td>
+ <td></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-removeItem">removeItem</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Remove item on specific layer</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">removeItem ( Number index) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index</span></td>
+ <td>Number</td>
+ <td>required</td>
+ <td></td>
+ <td></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<td>Shows a control that indicates the progress percentage of an on-going operation by circular shape.</td>
</tr>
<tr>
+ <td><a href="wearable_circularindexscrollbar.htm">Circular index scroll bar</a></td>
+ <td>Shows a circular index scroll bar which uses rotary.</td>
+ </tr>
+ <tr>
<td><a href="wearable_drawer.htm">Drawer</a></td>
<td>Shows a panel that in the sub-layout on the left or right edge of screen.</td>
-
</tr>
<tr>
<td><a href="wearable_indexscrollbar.htm">Index scroll bar</a></td>
<td>Shows a control that you can use to scroll through multiple <span style="font-family: Courier New,Courier,monospace"><section></span> elements.
</tr>
<tr>
+ <td><a href="wearable_selector.htm">Selector</a></td>
+ <td>Shows a selector that select items.</td>
+ </tr>
+ <tr>
<td><a href="wearable_slider.htm">Slider</a></td>
<td>Shows a control that you can use to change values by dragging a handle on a horizontal scale.</td>
</tr>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_button.htm" label="Button"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_checkbox.htm" label="CheckboxRadio"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_circleprogressbar.htm" label="CircleProgressBar"></topic>
+ <topic href="html/ui_fw_api/Wearable_UIComponents/wearable_circularindexscrollbar.htm" label="CircularIndexScrollBar"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_drawer.htm" label="Drawer"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_indexscrollbar.htm" label="IndexScrollBar"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_list.htm" label="List"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_processing.htm" label="Processing"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_progress.htm" label="Progress"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_sectionchanger.htm" label="SectionChanger"></topic>
+ <topic href="html/ui_fw_api/Wearable_UIComponents/wearable_selector.htm" label="Selector"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_slider.htm" label="Slider"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_snaplistview.htm" label="SnapListview"></topic>
<topic href="html/ui_fw_api/Wearable_UIComponents/wearable_swipelist.htm" label="SwipeList"></topic>
projects / sdk / online-doc.git / commitdiff
