--- /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>Application Page Layout</title>
+ </head>
+ <body onload="prettyPrint()" id="content">
+
+<h1>Support for Round UI</h1>
+<p>Tizen Wearable Web UI Framework supports different types of devices(rectangle and circle) with the same application.
+<br><br>To support round UI along with rectangular UI, media query is required.</p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#apply">How to apply round UI</a></li>
+ <li><a href="#inCss">How to override css style for round UI using media query</a></li>
+ <li><a href="#inJs">How to write code selectively for round UI in JS</a></li>
+ <li><a href="#components">Support guide for UI components</a></li>
+</ol>
+
+<h2><a id="apply"></a>How to apply round UI</h2>
+<p>In order to support the round UI, you need to do the following.<br>
+<br> 1. Include the link tag for the latest "tau.css" file into <head> part in HTML.
+<br> ( <b>Note</b> : For the compatibility with rectangular UI, you must use the latest version of TAU library. )<br>
+<br> 2. Include the link tag for the latest "tau.circle.css" file with media query feature "-tizen-geometric-shape: circle" next to the link tag for the "tau.css".
+<br> ( <b>Note</b> : Adding the "tau.circle.css" file following the general "tau.css" file will cover the additional round UI. )<br>
+<br> 3. Include the link tag for the latest "tau.js" script file at the end of <body> part of HTML.<br>
+<br> 4. For writing separate code for round UI in JS, you can use "tau.support.shape.circle" property.<br>
+
+<pre class="prettyprint">
+<head name="viewport" content="width=device-width, user-scalable=no">
+ <title>Support for round UI</title>
+ <link rel="stylesheet" href="tau.css">
+ <!-- CSS media query on a link element -->
+ <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="tau.circle.css">
+ <link rel="stylesheet" href="css/stlye.css">
+</head>
+<body>
+ ...
+ <script type="text/javascript" src="tau.js"></script>
+ <script>
+ if (tau.support.shape.circle) {
+ /* implement your codes for round UI here */
+ } else {
+ /* implement your codes for rectangular UI here */
+ }
+ </script>
+</body>
+</pre>
+
+<p>The following figure shows an example of how media query("-tizen-geometric-shape: circle") would work in different devices.</p>
+<p class="figure"> Figure: apply to rectangular device and round device with media query</p>
+ <p style="text-align:center;">
+ <img src="../../../images/circular_support.png" />
+</p><br>
+
+<h2><a id="inCss"></a>How to override css style for round UI using media query</h2>
+<p>In order for some styles to be applied selectively, you can use media query feature "-tizen-geometric-shape" with "rectangle" or "circle" value.<p>
+
+<h3>Media query feature for Tizen devices</h3>
+
+<p>Media query in Tizen Wearable Web UI Framework utilizes "-tizen-geometric-shape" feature with "rectangle" or "circle" value to distinguish type difference.</p>
+ ( <b>Note</b> : "-tizen-geometric-shape" feature is only available in Tizen devices. )
+
+<table>
+ <caption>Table: Description for "-tizen-geometric-shape" feature.</caption>
+<tbody>
+ <tr>
+ <th colspan="2">-tizen-geometric-shape</th>
+ </tr>
+ <td>Value</td>
+ <td>rectangle | circle</td>
+ </tr>
+ <tr>
+ <td>Applied to</td>
+ <td>Visual media types</td>
+ </tr>
+ <tr>
+ <td>Accept min/max prefixes</td>
+ <td>No</td>
+ </tr>
+</tbody>
+</table><br>
+
+<pre class="prettyprint">
+.className {
+ /* implement basic css style for rectangular UI here */
+}
+
+@media screen and (-tizen-geometric-shape: circle) {
+ .className {
+ /* implement css style to be overridden for round UI here */
+ }
+}
+</pre><br>
+
+<h2><a id="inJs"></a>How to write code selectively for round UI in JS</h2>
+<p>Tizen Wearable Web UI FW provides the property "tau.support.shape.circle" that checks whether the type is circle or not. If you want implement code selectively for round UI and rectangular UI, you can use the property with boolean value.</p>
+ ( <b>Note</b> : For developing in a browser environment, this property is always set true when "tau.circle.css" is loaded. )<p>
+
+<pre class="prettyprint">
+if (tau.support.shape.circle) {
+ /* implement your codes for round UI here */
+} else {
+ /* implement your codes for rectangular UI here */
+}
+</pre><br>
+
+<h2><a id="components"></a>Support guide for UI components</h2>
+<p>The following is how to use both rectangular UI components and round UI components.<br>
+
+<h3>Index of UI Components</h3>
+<ol class="toc">
+ <li><a href="./components/snaplist.htm">List</a></li>
+ <p>How to support list<p>
+ <li><a href="./components/expandableheader.htm">Header</a></li>
+ <p>How to support header<p>
+ <li><a href="./components/indexscroll.htm">Index Scroll Bar</a></li>
+ <p>How to support index scroll bar<p>
+ <li><a href="./components/progress.htm">Circle Progress Bar</a></li>
+ <p>How to support circle progress bar<p>
+ <li><a href="./components/processing.htm">Processing</a></li>
+ <p>How to support processing<p>
+ <li><a href="./components/moreoptions.htm">More Options</a></li>
+ <p>How to support more options button<p>
+ <li><a href="./components/footerbutton.htm">Footer Button</a></li>
+ <p>How to support footer buttons<p>
+ <li><a href="./components/thumbnail.htm">Thumbnail</a></li>
+ <p>How to support thumbnail<p>
+</ol>
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="../index.htm">Tizen Wearable Web UI Framework Reference</a></li></ul>
+
+ <div id="footer">
+ <hr size="1" />
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+ </div>
+
+ <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+ </body>
+</html>
--- /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>How to support Header</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Header</h1>
+
+Header in Round UI is expandable. In order to support the expandable header, you can use TAU helper script.<p>
+More informations for <a href="../../helper/helper.htm">helper script</a> are here.<p>
+The following explains how to implement the expandable header.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_header.png" /></td>
+ <td><img src="../../../../images/round_header.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="headerPage" >
+ <header class="ui-header" id="myHeader">
+ <h2 class="ui-title">Long title with ExpandableHeader</h2>
+ </header>
+ <div class="ui-content content-padding">
+ Header is expandable in Round UI.
+ </div>
+</div>
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<pre class="prettyprint">
+var page = document.querySelector("#headerPage"),
+
+page.addEventListener( "pagebeforeshow", function() {
+ var header = document.getElementById("myHeader"),
+ headerHelper;
+
+ if(tau.support.shape.circle) {
+ headerHelper = tau.helper.ExpandableHeaderMarqueeStyle.create(header, {});
+ }
+});
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support Footer Button</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Footer Button</h1>
+
+The following explains how to make the footer button which can support both rectangular UI and round UI.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+ <li><a href="#layout2">Layout (multiple buttons)</a></li>
+ <li><a href="#htmlCode2">HTML code (multiple buttons)</a></li>
+ <li><a href="#cssCode2">CSS code (multiple buttons)</a></li>
+ <li><a href="#jsCode">Javascript code (multiple buttons)</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_footer.png"/></td>
+ <td><img src="../../../../images/round_footer.png"/></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table><br>
+
+<p>Bottom button of round UI has "ui-bottom-button" class.</p>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="bottomButtonPage" >
+ <header class="ui-header">
+ <h2 class="ui-title">Bottom Button</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>
+ <footer class="my-footer ui-footer ui-bottom-button ui-fixed">
+ <a href="#" class="ui-btn my-button">Button</a>
+ </footer>
+</div>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+@media all and (-tizen-geometric-shape: circle) {
+ .my-footer .my-button::before {
+ -webkit-mask-image: url(/*path of the image*/);
+ }
+}
+</pre>
+
+<h2><a id='layout2'></a>Layout (multiple buttons)</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_multibtn.png"/></td>
+ <td><img src="../../../../images/round_multibtn.png"/></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table><br>
+
+<p>When there are multiple buttons, the buttons except for the first button use drawer in round UI.</p>
+
+<h2><a id='htmlCode2'></a>HTML code (multiple buttons)</h2>
+
+<pre class="prettyprint">
+<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>
+
+ <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>
+ </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>
+</div>
+</pre>
+
+<h2><a id='cssCode2'></a>CSS code (multiple buttons)</h2>
+
+<pre class="prettyprint">
+.drawer-elem {
+ display: none;
+}
+
+@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;
+ }
+ .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-btn::before {
+ left: 50%;
+ transform: translate3d(-50%, 0, 0);
+ -webkit-mask-image: url(/*path of the image*/);
+ }
+
+ .ui-bottom-button a + a {
+ display: none;
+ }
+}
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code (multiple buttons)</h2>
+
+<pre class="prettyprint">
+(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",
+ });
+ }
+ });
+})();
+</pre>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support Index Scroll Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Index Scroll Bar</h1>
+
+Round UI provides circular index scroll bar component.
+<p>Refer to the following for supporting the circular index scroll bar.
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_index.png" /></td>
+ <td><img src="../../../../images/round_index.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<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="li-divider">A</li>
+ <li>Anton</li>
+ <li class="li-divider">B</li>
+ <li>Barry</li>
+ <li>Bob</li>
+ <li class="li-divider">C</li>
+ <li>Carry</li>
+ <li class="li-divider">D</li>
+ <li>Daisy</li>
+ <li class="li-divider">E</li>
+ <li>Eric</li>
+ <li class="li-divider">F</li>
+ <li>Fay</li>
+ <li class="li-divider">G</li>
+ <li>Garry</li>
+ </ul>
+ </section>
+</div>
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<p><b>How to create a component selectively</b><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><b>How to use callback</b><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 li-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"),
+ isCircle = tau.support.shape.circle,
+ scrollHandlers = {},
+ 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);
+
+ if (!isCircle) {
+ // Create IndexScrollbar
+ indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
+ } else {
+ // Create CircularIndexScrollbar
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+ // scroll event handlers
+ scrollHandlers = {
+ start: function () {
+ if (!indexScrollbar.isShow()) {
+ indexScrollbar.hideHandler();
+ }
+ },
+ end: function () {
+ if (!indexScrollbar.isShow()) {
+ indexScrollbar.showHandler();
+ }
+ }
+ };
+
+ listviewElement.addEventListener("scrollstart", scrollHandlers.start);
+ listviewElement.addEventListener("scrollend", scrollHandlers.end);
+ }
+
+
+ // 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 li-divider element
+ scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+ }
+ });
+ });
+
+ page.addEventListener("pagehide", function(ev) {
+ if (isCircle) {
+ listviewElement.removeEventListener("scrollstart", scrollHandlers.start);
+ listviewElement.removeEventListener("scrollend", scrollHandlers.end);
+ }
+ indexScrollbar.destroy();
+ });
+} ());
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support More options</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support More options</h1>
+
+In rectangular UI, you can implement more options using button and popup components.<p>
+Round UI provides drawer and its helper for more options button.<p>
+More informations for <a href="../../helper/helper.htm">helper script</a> are here.<p>
+The following explains how to make the more options for Round UI.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_moreoption.png" /></td>
+ <td><img src="../../../../images/round_moreoption.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="moreoptionsPage" >
+ <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>
+ <!-- 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>
+ <!-- Circle Profile -->
+ <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" ata-drag-edge="1">
+ <div id="moreoptionsSectionChanger" class="ui-section-changer">
+ <div>
+ <section>
+ <button class="option-button">1</button>
+ </section>
+ <section>
+ <button class="option-button">2</button>
+ </section>
+ <section>
+ <button class="option-button">3</button>
+ </section>
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+#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;
+ }
+ .sections,
+ .options {
+ text-align: center;
+ }
+ .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;
+ }
+}
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<pre class="prettyprint">
+(function(){
+ var page = document.querySelector("#moreoptionsPage"),
+ popup = page.querySelector("#moreoptionsPopup"),
+ drawer = page.querySelector("#moreoptionsDrawer"),
+ handler = page.querySelector(".ui-more");
+
+ page.addEventListener( "pagebeforeshow", function() {
+ var popupWidget;
+
+ if (tau.support.shape.circle) {
+ tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: ".ui-more",
+ });
+ } else {
+ // Shape is rectangle
+ popupWidget = tau.widget.Popup(popup);
+ tau.event.on(handler, "click", function(e){
+ popupWidget.open();
+ }, false);
+ }
+ });
+})();
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support Processing</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Processing</h1>
+
+Round UI provides full size processing component.
+<p>The following explains how to support the full size processing component with former processing component.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_processing.png" /></td>
+ <td><img src="../../../../images/round_processing.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<header class="ui-header">
+ <h2 class="ui-title">Processing</h2>
+</header>
+<div class="ui-content content-padding">
+ <div class="ui-processing"></div>
+ <div class="ui-processing-text">
+ Description about progress
+ </div>
+</div>
+<div class="ui-processing ui-processing-full-size"></div>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+.ui-processing-full-size {
+ display: none;
+}
+
+@media all and (-tizen-geometric-shape: circle) {
+ .ui-processing {
+ display: none;
+ }
+ .ui-processing.ui-processing-full-size {
+ display: block;
+ }
+}
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support Circle Progress Bar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Circle Progress Bar</h1>
+
+Round UI provides full size circle progress bar component.
+<p>The following explains how to support the full size circle progress bar component with rotary event in round UI.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_progress.png" /></td>
+ <td><img src="../../../../images/round_progress.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<header class="ui-header">
+ <h2 class="ui-title">Circle Progress</h2>
+</header>
+<div class="ui-content content-padding">
+ <div class="result" id="result"></div>
+</div>
+<footer class="ui-footer ui-grid-col-2">
+ <a href="#" class="ui-btn" id="minus">-10%</a>
+ <a href="#" class="ui-btn" id="plus">+10%</a>
+</footer>
+<progress class="ui-circle-progress" id="circleprogress" max="100" value="20"></progress>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+.ui-progressbar-large {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate3d(-50%, -50%, 0);
+}
+.result {
+ font-size:35px;
+ text-align:center;
+ top: 33%;
+ left: 50%;
+ -webkit-transform: translate3d(-50%, -50%, 0);
+ position: absolute;
+}
+
+@media all and (-tizen-geometric-shape: circle) {
+ .result {
+ top: 50%;
+ margin: 0;
+ }
+ .ui-footer {
+ display: none;
+ }
+}
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<pre class="prettyprint">
+(function(){
+ var page = document.getElementById( "pageCircleProgressBar" ),
+ progressBar = document.getElementById("circleprogress"),
+ minusBtn = document.getElementById("minus"),
+ plusBtn = document.getElementById("plus"),
+ resultDiv = document.getElementById("result"),
+ isCircle = tau.support.shape.circle,
+ progressBarWidget,
+ resultText,
+ i;
+
+ function printResult() {
+ resultText = progressBarWidget.value();
+ resultDiv.innerHTML = resultText + "%";
+ };
+
+ function clearVariables() {
+ page = null;
+ progressBar = null;
+ minusBtn = null;
+ plusBtn = null;
+ resultDiv = null;
+ };
+
+ function unbindEvents() {
+ page.removeEventListener("pageshow", pageBeforeShowHandler);
+ page.removeEventListener("pagehide", pageHideHandler);
+ if (isCircle) {
+ document.removeEventListener("rotarydetent", rotaryDetentHandler);
+ } else {
+ minusBtn.removeEventListener("click", minusBtnClickHandler);
+ plusBtn.removeEventListener("click", plusBtnClickHandler);
+ }
+ };
+
+ function minusBtnClickHandler() {
+ i = i-10;
+ if (i < 0) {
+ i=0;
+ }
+ progressBarWidget.value(i);
+ printResult();
+ };
+
+ function plusBtnClickHandler() {
+ i = i+10;
+ if (i > 100) {
+ i=100;
+ }
+ progressBarWidget.value(i);
+ printResult();
+ };
+
+ function rotaryDetentHandler() {
+ // Get rotary direction
+ var direction = event.detail.direction,
+ value = parseInt(progressBarWidget.value());
+
+ if (direction === "CW") {
+ // Right direction
+ if (value < 100) {
+ value++;
+ } else {
+ value = 100;
+ }
+ } else if (direction === "CCW") {
+ // Left direction
+ if (value > 0) {
+ value--;
+ } else {
+ value = 0;
+ }
+ }
+
+ progressBarWidget.value(value);
+ printResult();
+ }
+
+ function pageBeforeShowHandler() {
+ if (isCircle) {
+ // make Circle Progressbar object
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "full"});
+ document.addEventListener("rotarydetent", rotaryDetentHandler);
+ } else {
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "large"});
+ minusBtn.addEventListener("click", minusBtnClickHandler);
+ plusBtn.addEventListener("click", plusBtnClickHandler);
+ }
+
+ i = parseInt(progressBarWidget.value());
+ resultDiv.innerHTML = i + "%";
+ };
+
+ function pageHideHandler() {
+ unbindEvents();
+ clearVariables();
+ // release object
+ progressBarWidget.destroy();
+ };
+
+ page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
+ page.addEventListener("pagehide", pageHideHandler);
+}());
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support List</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support List</h1>
+
+Round UI has snap list component. You can implement the snap list with marquee component using the helper.<p>
+More informations for <a href="../../helper/helper.htm">helper script</a> are here.<p>
+The following explains how to implement list which can support both rectangular UI and round UI.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_snap.png" /></td>
+ <td><img src="../../../../images/round_snap.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="snapListPage" >
+ <header class="ui-header">
+ <h2 class="ui-title">Snap List</h2>
+ </header>
+ <div class="ui-content">
+ <ul class="ui-listview ui-snap-listview expand-list" id="snapList">
+ <li class="li-has-3line">
+ <div class="ui-marquee ui-marquee-gradient">1.3line SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-3line">
+ <div class="ui-marquee ui-marquee-gradient">2.3line SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-3line">
+ <div class="ui-marquee ui-marquee-gradient">3.3line SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-3line">
+ <div class="ui-marquee ui-marquee-gradient">4.3line SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-3line">
+ <div class="ui-marquee ui-marquee-gradient">5.3line SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ </ul>
+ </div>
+</div>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+.ui-listview li .li-text-sub {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 32px;
+ color: rgb(51, 51, 51);
+}
+
+.ui-listview li.li-has-3line {
+ padding-top: 9px;
+ padding-bottom: 10px;
+ height: 128px;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-marquee{
+ -webkit-transform: translate3d(0, 30px, 0);
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee{
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2){
+ -webkit-transform: translate3d(0, -10px, 0);
+ opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2){
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1;
+ -webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child{
+ -webkit-transform: translate3d(0, -42px, 0);
+ opacity: 0;
+}
+
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child{
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1;
+ -webkit-transition: all ease 1s;
+}
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<pre class="prettyprint">
+var page = document.querySelector("#snapListPage"),
+
+page.addEventListener( "pagebeforeshow", function() {
+ var list = document.getElementById("snapList"),
+ listHelper;
+
+ if(tau.support.shape.circle) {
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1});
+ }
+});
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>How to support Thumbnail</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>How to support Thumbnail</h1>
+
+Round UI provides circle shaped thumbnail.<p>
+The following explains how to implement the thumbnail which can support both rectangular UI and round UI.<p>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#htmlCode">HTML code</a></li>
+ <li><a href="#cssCode">CSS code</a></li>
+ <li><a href="#jsCode">Javascript code</a></li>
+</ol>
+
+<h2><a id='layout'></a>Layout</h2>
+
+<table>
+ <tbody>
+ <tr>
+ <td><img src="../../../../images/rectangular_thumbnail.png" /></td>
+ <td><img src="../../../../images/round_thumbnail.png" /></td>
+ </tr>
+ <tr>
+ <td align="center">in Rectangular UI</td>
+ <td align="center">in Round UI</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2><a id='htmlCode'></a>HTML code</h2>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="sectionChangerPage" data-enable-page-scroll="false" >
+ <div id="sectionChanger" class="ui-content ui-section-changer">
+ <div id="scroller">
+ <section class="ui-section-active">
+ <div class="thumbnail">1</div>
+ </section>
+ <section>
+ <div class="thumbnail">2</div>
+ </section>
+ <section>
+ <div class="thumbnail">3</div>
+ </section>
+ </div>
+ </div>
+</div>
+</pre>
+
+<h2><a id='cssCode'></a>CSS code</h2>
+
+<pre class="prettyprint">
+section {
+ padding: 0 10px 0 10px;
+ height: 100%;
+}
+.thumbnail {
+ height: 300px;
+ width: 200px;
+ background-color: #80482f;
+ top: 50%;
+ transform: translate3d(0, -50%, 0);
+ position: relative;
+ text-align: center;
+ line-height: 300px;
+}
+.ui-section-active .thumbnail{
+ background-color: #000000;
+ border: 1px solid #a06322;
+}
+
+@media all and (-tizen-geometric-shape: circle) {
+ section {
+ padding: 0;
+ }
+ .thumbnail {
+ height: 200px;
+ width: 200px;
+ border-radius: 50%;
+ background-color: #802532;
+ top: 50%;
+ position: relative;
+ text-align: center;
+ line-height: 200px;
+ transform: scale(0.8) translate3d(0, -60%, 0);
+ transition: transform 300ms;
+ }
+ .ui-section-active .thumbnail{
+ transform: scale(1) translate3d(0, -50%, 0);
+ }
+}
+</pre>
+
+<h2><a id='jsCode'></a>Javascript code</h2>
+
+<pre class="prettyprint">
+(function(){
+ var page = document.getElementById("sectionChangerPage"),
+ sectionChanger = document.getElementById("sectionChanger");
+
+ page.addEventListener( "pagebeforeshow", function() {
+ tau.widget.SectionChanger(sectionChanger, {
+ orientation: "horizontal",
+ fillContent: false
+ });
+ });
+})();
+</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../circular_support.htm">Support for round UI</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<p>Drag event is a set of events that are triggered when the user drags on a gesture-enabled element. The following table defines the triggered events.
</p>
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#dragevent">Drag Events</a></li>
+
+ <li><a href="#dragevent-option">Options</a></li>
+
+ <li><a href="#example">Example</a></li>
+</ol>
+
+
+<h2><a id='dragevent'></a>Drag Events</h2><p>
+
<table>
- <caption>Table: Drag events</caption>
<tbody>
<tr>
<th>Event</th>
</tbody>
</table>
-<p>The following table describes the supported drag event options.</p>
-
+<h2><a id='dragevent-option'></a>Options</h2><p>
<table>
- <caption>Table: Drag event options</caption>
<tbody>
<tr>
<th>Option</th>
</table>
-<p>To use a drag event in the application, use the following code:</p>
+<h2><a id='example'></a>Example</h2><p>
+<p>The following shows how to use drag events.</p>
+
+<h3>HTML</h3>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="pageDrag">
+ <header class="ui-header">
+ <h2 class="ui-title">Drag Event</h2>
+ </header>
+ <div id="content" class="ui-content content-padding"></div>
+</div>
+</pre>
+
+<h3>Javascript</h3>
+
<pre class="prettyprint">
-var element = document.getElementById("test_el");
-tau.event.enableGesture(element, new tau.event.gesture.Drag(
-{
- blockVertical: true
-}));
-
-element.addEventListener("dragstart", function(e)
-{
- console.log("dragstart");
-});
-
-element.addEventListener("drag", function(e)
-{
- console.log("direction = " + e.detail.direction);
-});
+(function() {
+ var page = document.getElementById("pageDrag");
+ page.addEventListener("pagebeforeshow", function() {
+ var content = document.getElementById("content");
+ tau.event.enableGesture(content, new tau.event.gesture.Drag({
+ blockVertical: true
+ }));
+
+ content.addEventListener("dragstart", function(e) {
+ console.log("drag start");
+ });
+
+ content.addEventListener("drag", function(e) {
+ console.log("direction = " + e.detail.direction);
+ });
+
+ content.addEventListener("dragend", function(e) {
+ console.log("drag end");
+ });
+ });
+}());
</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="gesture.htm">Gesture Events</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<body onload="prettyPrint()" id="content">
<h1>Events</h1>
-<p>The Web UI framework (called as <b>TAU</b>; Tizen Advanced UI framework) provides events optimized for the Tizen Web application. The following table displays the events provided by the Tizen wearable Web UI framework.
+<p>The Tizen Advanced UI (TAU) framework provides events optimized for the Tizen Web application. The following table displays the events provided by the TAU framework.
</p>
<table>
- <caption>Table: Tizen wearable Web UI framework events</caption>
+ <caption>Table: TAU events</caption>
<tbody>
<tr>
<th>Event Group</th>
</tbody>
</table>
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="../index.htm">Tizen Wearable Web UI Framework Reference</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<body onload="prettyPrint()" id="content">
<h1>Gesture Events</h1>
-<p>The Web UI framework provides gesture events optimized for the Tizen Web application. The following table displays the gesture events provided by the Tizen wearable Web UI framework.
-</p>
+<p>The Tizen Advanced UI (TAU) framework provides gesture events optimized for the Tizen Web application.<p>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#event">Gesture Events</a></li>
+
+ <li><a href="#method">Methods</a></li>
+
+ <li><a href="#detail">Event Detail Data</a></li>
+</ol>
+
+<h2><a id='event'></a>Gesture Events</h2><p>
<table>
- <caption>Table: Gesture events</caption>
<tbody>
<tr>
<th style="width:10%;">Gesture</th>
</tbody>
</table>
+<h2><a id='method'></a>Methods</h2><p>
+
<p>The following table describes custom gesture event-related methods.</p>
<table>
- <caption>Table: Event methods</caption>
<tbody>
<tr>
<th>Method</th>
<p>To use a custom event, use the following code:</p>
<pre class="prettyprint">
-var element = document.getElementById("test_el");
+/* element is your event target element */
tau.event.enableGesture(element, new tau.event.gesture.Drag(), new tau.event.gesture.Swipe());
-element.addEventListener("drag", function(e)
-{
- console.log("drag event fired");
-} );
-element.addEventListener("swipe", function(e)
-{
- console.log("swipe event fired");
-} );
+element.addEventListener("drag", function(e) {
+ console.log("drag event fired");
+});
+element.addEventListener("swipe", function(e) {
+ console.log("swipe event fired");
+});
</pre>
-<p>The following table displays the custom event detail data.</p>
+
+<h2><a id='detail'></a>Event Detail Data</h2><p>
+<p>TAU gesture events have "detail" object. "detail" contains informations for the events.</p>
<table>
- <caption>Table: Custom event data</caption>
<tbody>
<tr>
<th>Property</th>
</tbody>
</table>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="events.htm">Events</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<p>Swipe event is triggered when the user swipes on a gesture-enabled element. The following table defines the triggered event.
</p>
+<h2>Table of Contents</h2>
+<ol class="toc">
+ <li><a href="#swipeevent">Swipe Event</a></li>
+
+ <li><a href="#swipeevent-option">Options</a></li>
+
+ <li><a href="#example">Example</a></li>
+</ol>
+
+<h2><a id='swipeevent'></a>Swipe Event</h2><p>
+
<table>
- <caption>Table: Swipe event</caption>
<tbody>
<tr>
<th>Event</th>
</tbody>
</table>
-<p>The following table describes the supported swipe event options.</p>
-
+<h2><a id='swipeevent-option'></a>Options</h2><p>
<table>
- <caption>Table: Swipe event options</caption>
<tbody>
<tr>
<th>Option</th>
</table>
-<p>To use a swipe event in the application, use the following code:</p>
+<h2><a id='example'></a>Example</h2><p>
+<p>The following shows how to use swipe events.</p>
+<h3>HTML</h3>
+
<pre class="prettyprint">
-var element = document.getElementById("test_el");
-tau.event.enableGesture(element, new tau.event.gesture.Swipe(
-{
- orientation: "horizontal"
-}));
+<div class="ui-page ui-page-active" id="pageSwipe">
+ <header class="ui-header">
+ <h2 class="ui-title">Swipe Event</h2>
+ </header>
+ <div id="content" class="ui-content content-padding"></div>
+</div>
+</pre>
+
+<h3>Javascript</h3>
+
+<pre class="prettyprint">
+(function() {
+ var page = document.getElementById("pageSwipe");
+ page.addEventListener("pagebeforeshow", function() {
+ var content = document.getElementById("content");
+ tau.event.enableGesture(content, new tau.event.gesture.Swipe( {
+ orientation: "horizontal"
+ }));
-element.addEventListener("swipe", function(e)
-{
- console.log("swipe = " + e.detail.direction);
-});
+ content.addEventListener("swipe", function(e) {
+ console.log("swipe direction = " + e.detail.direction);
+ });
+ });
+}());
</pre>
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="gesture.htm">Gesture Events</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
--- /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>Helper Scripts</title>
+ </head>
+ <body onload="prettyPrint()" id="content">
+
+<h1>Helper Scripts</h1>
+<p>Tizen Advanced UI (TAU) framework provides helper script to support some creating usable components for the Web applications.
+</p>
+
+<table>
+ <caption>Table: TAU helper script</caption>
+<tbody>
+ <tr>
+ <th>Namespace of Helper</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><a href="helper_listmarqueestyle.htm">SnapListMarqueeStyle</a></td>
+ <td>Provides creating marquee-able and expandable list style with SnapListview.</td>
+ </tr>
+</tbody>
+</table>
+
+<p>You can use TAU helper as follows:</p>
+
+<pre class="prettyprint"><script>
+ var helperInstance = tau.helper.<i>NameSpace</i>
+</script>
+</pre>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="../index.htm">Tizen Wearable Web UI Framework Reference</a></li></ul>
+
+ <div id="footer">
+ <hr size="1" />
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+ </div>
+
+ <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+ </body>
+</html>
--- /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>SnapListMarqueeStyle</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>SnapListMarqueeStyle</h1>
+
+SnapListMarqueeStyle helper provides helper script to support some creating usable components for list style.
+<br>It supports making listview more effective using <a href="../widgets/widget_snaplistview.htm">SnapListview</a> and <a href="../widgets/widget_marquee.htm">Marquee</a> component.
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This helper script is supported since <strong>2.3</strong>.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#default-selectors0.06779201747849584">How to create SnapListMarqueeStyle</a>
+
+ </li>
+
+ <li><a href="#options-list">Options</a></li>
+ <li><a href="#methods-list">Methods</a></li>
+
+</ol>
+
+<h2><a id='default-selectors0.06779201747849584'></a>How to create SnapListMarqueeStyle</h2>
+
+<p>You can make your own style listview with SnapListMarqueeStyle as the following.</p>
+In this example, text of list item scrolls horizontally and the sub text appears if the list item is placed in the middle of the screen.
+
+<h3>HTML Example</h3>
+
+<p>You can add a multiline style listview as follows:</p>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="snaplistTest">
+ <header class="ui-header">
+ <h2 class="ui-title">Bottom Button</h2>
+ </header>
+ <div class="ui-content">
+ <ul class="ui-listview ui-snap-listview expand-list" id="snapList">
+ <li class="li-has-2line">
+ <div class="ui-marquee ui-marquee-gradient">1.SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-2line">
+ <div class="ui-marquee ui-marquee-gradient">2.SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-2line">
+ <div class="ui-marquee ui-marquee-gradient">3.SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ <li class="li-has-2line">
+ <div class="ui-marquee ui-marquee-gradient">4.SnapListview with Marquee SnapListview with Marquee</div>
+ <div class="li-text-sub ui-li-sub-text">sub-text</div>
+ </li>
+ </ul>
+ </div>
+</div>
+</pre>
+
+<h3>CSS Style Example</h3>
+
+<p>In CSS code, you can make your list animation style as follows:</p>
+<pre class="prettyprint">.ui-listview.expand-list li.li-has-2line .ui-marquee{
+ -webkit-transform: translate3d(0, 16px, 0);
+ -webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee{
+ -webkit-transform: translate3d(0, 0, 0);
+ -webkit-transition: all ease 1s;
+}
+
+.ui-listview.expand-list li.li-has-2line .ui-li-sub-text{
+ -webkit-transform: translate3d(0, -20px, 0);
+ opacity: 0;
+ -webkit-transition: all ease .5s;
+}
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text{
+ -webkit-transform: translate3d(0, 0, 0);
+ opacity: 1;
+ -webkit-transition: all ease 1s;
+}
+</pre>
+
+<h3>Javascript Example</h3>
+
+<p>In javascript code, you can make your list as SnapListview component as follows:</p>
+<pre class="prettyprint"><script>
+var page = document.getElementById("snaplistTest"),
+ list = document.getElementById("snapList"),
+ listHelper;
+
+page.addEventListener( "pageshow", function() {
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+});
+
+page.addEventListener( "pagehide", function() {
+ listHelper.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">marqueeDelay</span></td>
+ <td class="option">number</td>
+ <td class="option">0</td>
+ <td class="option">Sets the delay time for marquee component. The unit of time is millisecond.</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-value">create</a> ( ) </pre>
+ </td>
+ <td><p>Create related components for SnapListMarqueeStyle.</p></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-value">create</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Create related components for SnapListMarqueeStyle.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">tau.helper.SnapListMarqueeStyle.create( HTMLElement, options ) </pre>
+ </div>
+
+ <p><span class="version">Since: </span>
+ 2.3
+ </p>
+
+ <div class="description">
+ <p>
+ <p>SnapListMarqueeStyle Object.</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>object</td>
+ <td>SnapListMarqueeStyle</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
+ <pre name="code" class="examplecode
+ prettyprint"><ul class="ui-listview ui-snap-listview" id="snapList">
+ <li>some element or text</li>
+</ul>
+
+<script>
+ var list = document.getElementById("snapList"),
+ listHelper;
+
+ // create helper
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+</script>
+</pre>
+ </div>
+
+ </dd>
+<dt class="method"><code><b><span class="methodName"
+ id="method-value">destroy</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Destroy related components for SnapListMarqueeStyle.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">destroy ( ) </pre>
+ </div>
+
+ <p><span class="version">Since: </span>
+ 2.3
+ </p>
+
+ <div class="description">
+ <p>
+ <p>No return value</p>
+
+
+ </p>
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p><p></p></span>
+ <pre name="code" class="examplecode
+ prettyprint"><ul class="ui-listview ui-snap-listview" id="snapList">
+ <li>some element or text</li>
+</ul>
+
+<script>
+ var list = document.getElementById("snapList"),
+ listHelper;
+
+ // create helper
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+
+ // destroy helper
+ listHelper.destroy();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./helper.htm">Helper Scripts</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<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>Tizen Wearable Web UI Framework Reference</title>
+ <title>Tizen Wearable Web UI Framework Reference</title>
</head>
<body onload="prettyPrint()" id="content">
<h1>Tizen Wearable Web UI Framework Reference</h1>
-<p><b>The Web UI framework is called Tizen Advanced UI (TAU) framework.</b> The Web UI framework is used for page navigation and developing applications based on the Tizen wearable themes.</p>
+<p>Tizen wearable Web UI framework is used for page navigation and developing applications based on the Tizen wearable themes.</p>
-<p>The Web UI Framework in wearable Web applications consists of the followings:</p>
+<p>The framework consists of the following services:</p>
<ul>
<li>Page navigation
- <p>Navigation JavaScript library is provided to allow smooth navigation between Tizen wearable application <a href="page/app_page_layout.htm">pages</a>.
+ <p>Navigation JavaScript library is provided to allow smooth navigation between Tizen wearable application <a href="page/app_page_layout.htm">pages</a>.
</p></li>
<li>Web theme
- <p>CSS themes and resources (compatible with the UI component source code) are available for Tizen Wearable Web <a href="widgets/widget_reference.htm">UI components</a>.</p></li>
+ <p>CSS themes and resources (compatible with the UI Component source code) are available for Tizen Wearable Web <a href="widgets/widget_reference.htm">UI Components</a>.</p></li>
<li>Element events
- <p>The Tizen Wearable Web UI Framework provides <a href="event/events.htm">events</a> optimized for the Web applications. </p></li>
+ <p>Tizen Advanced UI (TAU) framework provides <a href="event/events.htm">events</a> optimized for the Web applications. </p></li>
+ <li>Helper scripts
+ <p>Tizen Advanced UI (TAU) framework provides <a href="helper/helper.htm">helper script</a> to support some creating usable components for the Web applications. </p></li>
+ <li>Support for Round UI
+ <p>Tizen Advanced UI (TAU) framework provides <a href="circular_support/circular_support.htm">Support for Round UI</a> with media query. </p></li>
</ul>
<table class="note">
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"><p>The Web UI Framework runs only on browsers supporting the HTML5/CSS standards. The draft version of the W3C specification is not fully supported.</p></td>
+ <td class="note"><p>The framework runs only on browsers supporting the HTML5/CSS standards. The draft version of the W3C specification is not fully supported.</p></td>
</tr>
</tbody>
</table>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="../api_reference.htm">API References</a></li>
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<body onload="prettyPrint()" id="content">
<h1>Application Page Layout</h1>
-<p>In the Web UI framework (called as <b>TAU</b>; Tizen Advanced UI framework) for Wearable Web Applications, the application page structure is based on a header and content elements:</p>
+<p>In the Tizen wearable Web UI framework, the application page structure is based on a header and content elements:</p>
<ul><li>
<p>The header is placed at the top, and displays the page title.</p></li>
<li><p> The content is the section below the header, showing the main content of the page.</p></li></ul>
<li><a href="page_event.htm">Handle page events</a></li>
</ul>
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="../index.htm">Tizen Wearable Web UI Framework Reference</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<pre class="prettyprint">
<!--Main page-->
<div id="one" class="ui-page ui-page-active">
- <header class="ui-header"></header>
+ <header class="ui-header">
+ <h2 class="ui-title">First Page</h2>
+ </header>
<div class="ui-content"></div>
- <footer class="ui-footer"></footer>
+ <footer class="ui-footer">
+ <a href="#two" class="ui-btn">to second page</a>
+ </footer>
</div>
<!--Secondary page-->
-<div id="two" class="ui-page">
- <header class="ui-header"></header>
+<div id="two" class="ui-page ui-page-active">
+ <header class="ui-header">
+ <h2 class="ui-title">Second Page</h2>
+ </header>
<div class="ui-content"></div>
- <footer class="ui-footer"></footer>
+ <footer class="ui-footer">
+ <a href="#one" class="ui-btn">to first page</a>
+ </footer>
</div>
</pre>
<p>
To find the currently active page, use the <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class.</p>
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="app_page_layout.htm">Application Page Layout</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">pop</span></td>
- <td>Makes the content of the next page pop, appearing to conceal the content of the previous page.</td>
+ <td>Makes the content of the next page pop, appearing to conceal the content of the previous page.<br>In round UI, this is default.</td>
</tr>
</tbody>
</table>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="app_page_layout.htm">Application Page Layout</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">pagecreate</span></td>
- <td>Triggered when the page has been created in the DOM (for example, through Ajax) but before all UI components have had an opportunity to enhance the contained markup.</td>
+ <td>Triggered when the page has been created in the DOM (for example, through Ajax) but before all UI Components have had an opportunity to enhance the contained markup.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">pagebeforeshow</span></td>
<p>To bind an event callback on the <strong>Back</strong> key, use the following code:</p>
<pre class="prettyprint">/* JavaScript code */
-window.addEventListener('tizenhwkey', function(ev)
-{
- if (ev.keyName === "back")
- {
- /* Call window.history.back() to go to previous browser window */
- /* Call tizen.application.getCurrentApplication().exit() to exit application */
- /* Add script to add another behavior */
- }
-}
+(function () {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === "back") {
+ var page = document.getElementsByClassName("ui-page-active")[0],
+ pageid = page ? page.id : "";
+
+ if ( pageid === "main" ) {
+ try {
+ /* Call tizen.application.getCurrentApplication().exit() to exit application */
+ tizen.application.getCurrentApplication().exit();
+ } catch (ignore) {
+ /* Add script to add another behavior */
+ }
+ } else {
+ /* Call window.history.back() to go to previous browser window */
+ window.history.back();
+ }
+ }
+ });
+})();
</pre>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+<li><a href="app_page_layout.htm">Application Page Layout</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<h1>Button</h1>
-<p>The button component shows on the screen a control that you can use to generate an action event when it is pressed and released. The component is coded with standard HTML anchor and input elements.</p>
+<p>The button component shows on the screen a control that you can use to generate an action event when it is pressed and released.<br> The component is coded with standard HTML anchor and input elements.</p>
<p>The following table describes the supported button classes.</p>
<table>
<caption>Table: Button type classes</caption>
<td><span style="font-family: Courier New,Courier,monospace">ui-btn</span></td>
<td>Creates the element as a button component.</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">ui-icon-*</span></td>
- <td>Creates an icon button in the header area. In the content or footer area, icon images are not supported.
- <p>To use this icon class, prefix the class with <span style="font-family: Courier New,Courier,monospace">ui-more</span> in the <span style="font-family: Courier New,Courier,monospace">button</span> element:
-<pre class="prettyprint">
-<button type="button" class="ui-more ui-icon-overflow">More Options</button>
-</pre>
- <p>Tizen supports 3 predefined icon CSS styles for wearable applications:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">ui-icon-detail</span> <img alt="ui icon detail" src="../../../images/ui_icon_detail.png" />
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">ui-icon-overflow</span> <img alt="ui icon overflow" src="../../../images/ui_icon_overflow.png" />
-</li>
-<li><span style="font-family: Courier New,Courier,monospace">ui-icon-selectall</span> <img alt="ui icon selectall" src="../../../images/ui_icon_selectall.png" />
-</li></ul></td>
- </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">ui-btn-icon</span></td>
<td><p>Creates an icon button.</p>
</tbody>
</table>
-<p>To add a button component to the application, use the following code. You can use the <span style="font-family: Courier New,Courier,monospace">disabled</span> attribute to disable a button and prevent the user from clicking it.</p>
+<p>To add a button component to the application, use the following code. You can use the <span style="font-family: Courier New,Courier,monospace">disabled</span> attribute to disable a button and prevent the user from clicking it.<br>
+And it is highly recomeneded to add these button in the content area and footer area, not header.</p>
<pre class="prettyprint">
<button type="button" class="ui-btn">Button</button>
</div>
</pre></li></ul>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
}
</pre>
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
--- /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>CircleProgressBar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>CircleProgressBar</h1>
+
+
+<p>Shows a control that indicates the progress percentage of an on-going operation by circular shape.</p>
+<p>The circle progress component shows a control that indicates the progress percentage of an on-going operation.<br>This component can be scaled to be fit inside a parent container.</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 round UI. The component may not be shown properly in rectangular UI.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#simple-progress bar0.9435037684161216">How to Create CircleProgressBar</a></li>
+ <li><a href="#options-list">Options</a></li>
+ <li><a href="#events-list">Events</a></li>
+ <li><a href="#methods-list">Methods</a></li>
+</ol>
+
+<h2><a id='simple-progress bar0.9435037684161216'></a>How to Create CircleProgressBar</h2>
+
+<h3>Default CircleProgressBar</h3>
+
+<p>If you don't make any widget "circleprogress" with <progress> element, you can show default progress style.<br>
+To add a CircleProgressBar widget to the application, use the following code:</p>
+
+<pre class="prettyprint"><div class="ui-page" id="pageCircleProgressBar">
+ <header class="ui-header"></header>
+ <div class="ui-content">
+ <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
+ </div>
+</div>
+<script>
+ (function(){
+
+ var page = document.getElementById( "pageCircleProgressBar" ),
+ progressBar = document.getElementById("circleprogress"),
+ progressBarWidget;
+
+ page.addEventListener( "pageshow", function() {
+ // make Circle Progressbar object
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar);
+
+ });
+
+ page.addEventListener( "pagehide", function() {
+ // release object
+ progressBarWidget.destroy();
+ });
+ }());
+</script>
+</pre>
+
+<h3>Full(screen) size CircleProgressBar</h3>
+<p>To add a circular shape(page size) progressbar in your application, you have to declare <progress> tag in "ui-page" element.
+ <br> And in your javascript code, you have to add option "size: full".
+ <br> Be sure to place the <progress> element outside of content element.
+</p>
+<pre class="prettyprint"><div class="ui-page" id="pageCircleProgressBar">
+ <header class="ui-header"></header>
+ <div class="ui-content"></div>
+ <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
+</div>
+<script>
+ (function(){
+
+ var page = document.getElementById( "pageCircleProgressBar" ),
+ progressBar = document.getElementById("circleprogress"),
+ progressBarWidget;
+
+ page.addEventListener( "pageshow", function() {
+ // make Circle Progressbar object
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: "full"});
+
+ });
+
+ page.addEventListener( "pagehide", function() {
+ // release object
+ progressBarWidget.destroy();
+ });
+ }());
+</script>
+</pre>
+
+<h3>Using event</h3>
+
+<p>Circle progress bar triggers "progresschange" event. The description is <a href="#events-list">here</a>.<br>
+The following shows how to use "progresschange" event.
+
+<pre class="prettyprint">
+progressBar.addEventListener("progresschange", function() {
+ // do something when the value of progress changes
+ console.log(progressBarWidget.value());
+});
+</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">containerClassName</span></td>
+ <td class="option">string</td>
+ <td class="option">null</td>
+ <td class="option">Sets the class name of CircleProgressBar container.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">size</span></td>
+ <td class="option">number | "full" | "large" | "medium" | "small"</td>
+ <td class="option">"medium"</td>
+ <td class="option">Sets the size of CircleProgressBar.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">thickness</span></td>
+ <td class="option">number</td>
+ <td class="option">null</td>
+ <td class="option">Sets the border width of CircleProgressBar.</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">progresschange</span></td>
+ <td><p>Triggered when the section is changed.</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">string <a href="#method-value">value</a> ( ) </pre>
+ </td>
+ <td><p>Get or Set value of the widget</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 value of the widget</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">string value ( ) </pre>
+ </div>
+
+ <p><span class="version">Since: </span>
+ 2.3
+ </p>
+
+ <div class="description">
+ <p>
+ <p>Return element value or set the value</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 element 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 class="ui-page" id="pageCircleProgressBar">
+ <header class="ui-header">
+ <h2 class="ui-title">Circle Progress Bar</h2>
+ </header>
+ <div class="ui-content content-padding"> Circle Progress Bar
+ <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
+ </div>
+ </div>
+
+ <script>
+ var page = document.getElementById( "pageCircleProgressBar" );
+
+ page.addEventListener( "pageshow", function() {
+ var progressbar = document.getElementById("circleprogress"),
+ progressbarWidget = tau.widget.CircleProgressBar(progressbar),
+ // return value in progress tag
+ value = progressbarWidget.value();
+ // sets the value for the progress
+ progressbarWidget.value("15");
+ });
+ </script>
+</pre>
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>CircularIndexScrollbar</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Circular IndexScrollbar</h1>
+
+
+<p>Shows a Circular IndexScrollbar component with indices, usually for the list.</p>
+<p>The circularindexscrollbar component shows on the screen a circularscrollbar with indices. The indices can be selected by moving the rotary.<br>And it 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 round 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 round and rectangular UI, see <a href="../circular_support/components/indexscroll.htm">here</a></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#manual-constructor0.6990520032122731">Manual constructor</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-show">show</a>
+ </li>
+
+ <li><a href="#method-hide">hide</a>
+ </li>
+
+ <li><a href="#method-value">value</a>
+ </li>
+
+ </ol>
+
+ </li>
+
+</ol>
+
+
+<h2><a id='manual-constructor0.6990520032122731'></a>Manual constructor</h2>
+
+<p>For manual creation of Circular IndexScrollbar, you can use constructor from <strong>tau</strong> namespace:</p>
+
+<pre class="prettyprint">var circularindexElement = document.getElementById('circularindex'),
+ 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>. Second parameter is <strong>options</strong> and it is a object with options for component.</p>
+
+<p>To add an CircularIndexScrollbar component to the application, use the following code:</p>
+
+<pre class="prettyprint"> <div id="foo" 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("foo");
+ tau.widget.CircularIndexScrollbar(elem);
+ elem.addEventListener("select", function( event ) {
+ var index = event.detail.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, selected by the circularindexscrollbar:</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" data-index="A,B,C,D,E"></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"),
+ scrollHandlers = {},
+ 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});
+
+ // scroll event handlers
+ scrollHandlers = {
+ start: function () {
+ if (!indexScrollbar.isShow()) {
+ indexScrollbar.hideHandler();
+ }
+ },
+ end: function () {
+ if (!indexScrollbar.isShow()) {
+ indexScrollbar.showHandler();
+ }
+ }
+ };
+
+ scroller.addEventListener("scrollstart", scrollHandlers.start);
+ scroller.addEventListener("scrollend", scrollHandlers.end);
+
+ // 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 li-divider element
+ scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+ }
+ });
+ });
+
+ page.addEventListener("pagehide", function(ev) {
+ scroller.removeEventListener("scrollstart", scrollHandlers.start);
+ scroller.removeEventListener("scrollend", scrollHandlers.end);
+ 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">duration</span></td>
+ <td class="option">number</td>
+ <td class="option">500</td>
+ <td class="option">duration of show/hide animation time</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:<br> At least 3 indices are required, otherwise it may not work</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">maxVisibleIndex</span></td>
+ <td class="option">number</td>
+ <td class="option">30</td>
+ <td class="option">maximum length of visible indices:<br>More than "3" is required, otherwise it may not work</td>
+ </tr>
+
+ <tr>
+ <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</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>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">indexshow</span></td>
+ <td><p>Event triggered after CircularIndexScrollbar is shown</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">indexhide</span></td>
+ <td><p>Event triggered after CircularIndexScrollbar is hidden</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-show">show</a> ( ) </pre>
+ </td>
+ <td><p>Show the CircularIndexScrollbar</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-hide">hide</a> ( ) </pre>
+ </td>
+ <td><p>Hide the CircularIndexScrollbar</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">string <a href="#method-value">value</a> ( ) </pre>
+ </td>
+ <td><p>Get or Set index of the CircularIndexScrollbar</p></td>
+ </tr>
+
+
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-show">show</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Show the CircularIndexScrollbar</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">show ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </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-hide">hide</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Hide the CircularIndexScrollbar</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">hide ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </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-value">value</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Get or Set index of the CircularIndexScrollbar</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("circularindex"),
+ circularIndexScrollbar = tau.widget.CircularIndexScrollbar(circularindexElement),
+ // return current index value
+ value = circularIndexScrollbar.value();
+ // sets the index value
+ circularIndexScrollbar.value("C");
+ </script>
+</pre>
+ </div>
+
+ </dd>
+
+
+
+
+
+ </dl>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>Drawer</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Drawer</h1>
+
+<P>
+Wearable Drawer component provides drawer UX in wearable device.<br>
+The drawer component is a panel that the application's sub layout on the left or right edge of the screen. <br>
+This component is hidden most of the time, but user can be opened as swipe gesture from the edge of the screen or click the element that is added event handler, handler has drawer.open() method.</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">We recommend you to make a handler element. Because if you don't set the handler, handler is set to page element automatically.
+ <br>Nevertheless, if you really want to make the page element as handler, you should be careful of data-drag-edge or dragEdge option value.
+ <br>Because default value of data-drag-edge or dragEdge option is set to '1' - which means that the whole area of page element becomes drawable handler. </td>
+ </tr>
+ </tbody>
+</table>
+
+
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#html-examples0.5723640653304756">How to create Drawer</a>
+
+ </li>
+
+ <li><a href="#options-list">Options</a></li>
+
+ <li><a href="#options-example">HTML Example with Options</a></li>
+
+ <li><a href="#drawer-state0.013524989364668727">Drawer state</a>
+
+ </li>
+
+
+ <li><a href="#methods-list">Methods</a>
+
+ <ol class="toc">
+
+ <li><a href="#method-setDragHandler">setDragHandler</a>
+ </li>
+
+ <li><a href="#method-transition">transition</a>
+ </li>
+
+ <li><a href="#method-open">open</a>
+ </li>
+
+ <li><a href="#method-close">close</a>
+ </li>
+
+ <li><a href="#method-getState">getState</a>
+ </li>
+
+ </ol>
+
+ </li>
+
+</ol>
+
+<h2><a id='html-examples0.5723640653304756'></a>How to create Drawer</h2>
+<p>To use Drawer component in your app, you need to declare "Drawer Handler(such as button)" and "Drawer Body(component)".<br>
+Please refer following example.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">
+If you used the drawer handler, you must implement style code of handler. We don't provide default handler style as framework level, but we provide custom style example in 'style.css'.
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3>HTML</h3>
+<pre class="prettyprint"> <div id="moreoptionsPage" class="ui-page">
+ <header class="ui-header ui-has-more">
+ <h2 class="ui-title">Drawer</h2>
+ <button class="ui-more ui-icon-overflow">Drawer</button>
+ </header>
+ <div class="ui-content content-padding">
+ Drawer
+ </div>
+
+ <!-- Circle Profile -->
+ <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moretionsPage" data-position="right" data-enable="true" data-drag-edge="1">
+ <div id="moreoptionsSectionChanger" class="ui-section-changer">
+ <div>
+ <seciont>
+ <button class="option-button">1</button>
+ </seciont>
+ <seciont>
+ <button class="option-button">2</button>
+ </seciont>
+ <seciont>
+ <button class="option-button">3</button>
+ </seciont>
+ </div>
+ </div>
+ </div>
+ </div>
+</pre>
+
+<h3>JavaScript</h3>
+<pre class="prettyprint">(function(){
+ var page = document.querySelector("#moreoptionsPage"),
+ popup = page.querySelector("#moreoptionsPopup"),
+ drawer = page.querySelector("#moreoptionsDrawer"),
+ handler = page.querySelector(".ui-more");
+
+ page.addEventListener( "pagebeforeshow", function() {
+ var popupWidget;
+
+
+ tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: ".ui-more",
+ });
+ });
+ })();</pre>
+
+<h3>CSS</h3>
+<pre class="prettyprint">
+#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;
+ }
+ .sections,
+ .options {
+ text-align: center;
+ }
+ .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;
+ }
+}
+</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">drawerTarget</span></td>
+ <td class="option">string</td>
+ <td class="option">".ui-page"</td>
+ <td class="option">Drawer appended target. Value type is CSS selector type.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">position</span></td>
+ <td class="option">"left" | "right"</td>
+ <td class="option">"left"</td>
+ <td class="option">Set the drawer position.<br>
+ If you set the value is "left", drawer appear from left side.<br>
+ If you set the value is "right", drawer appear from right side.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">enable</span></td>
+ <td class="option">boolean</td>
+ <td class="option">true</td>
+ <td class="option">Enable drawer component.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">dragEdge</span></td>
+ <td class="option">number</td>
+ <td class="option">1</td>
+ <td class="option">
+ Set the area on TARGET element to activate the drawer component.<br>
+ The value is based on ratio, so you should set the value between 0.0 and 1.0.<br>
+ This area has dependency on the position value such as 'right' or 'left'.<br>
+ For example, if you set the value to '0.5' and position was set to 'left', the area to activate the drawer component
+ is set to the left half side of the TARGET element.<br>
+ If you don't set the handler, TARGET element is set to the element which is selected as Target option value.<br>
+ However, if you set the handler, this option value is set to '1'.
+ </td>
+ </tr>
+
+ </tbody>
+</table>
+
+<h2><a href="#options-example"></a>HTML Example with Options</h2>
+<h3>Drawer positioning</h3>
+You can declare to 'position' option as below method.
+
+<pre class="prettyprint"> <div class="ui-drawer" data-position="left" id="leftdrawer">
+</pre>
+
+<h3>Drawer targeting</h3>
+You can declare to 'drawerTarget' option as below method.
+
+<pre class="prettyprint"> <div class="ui-drawer" data-drawer-target="#drawerPage">
+</pre>
+
+<h3>Drawer enable</h3>
+
+You can declare to 'enable' option as below method.
+
+<pre class="prettyprint"> <div class="ui-drawer" data-enable="true">
+</pre>
+
+<h3>Drawer drag gesture starting area</h3>
+
+You can declare to 'enable' option as below method.
+
+<pre class="prettyprint"> <div class="ui-drawer" data-drag-edge="1">
+</pre>
+
+
+
+
+
+<h2><a id='drawer-state0.013524989364668727'></a>Drawer state</h2>
+<p>Drawer has four state type. </p>
+
+<ul>
+ <li>"closed" - Drawer closed state.</li>
+ <li>"opened" - Drawer opened state.</li>
+ <li>"sliding" - Drawer is sliding state. This state does not mean that will operate open or close.</li>
+ <li>"settling" - drawer is settling state. 'Settle' means open or close status. So, this state means that drawer is animating for opened or closed state.</p>
+ </li>
+</ul>
+
+<p>You can get those states from getState() method.</p>
+
+ <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-setDragHandler">setDragHandler</a> ( Element element ) </pre>
+ </td>
+ <td><p>Set Drawer drag handler.<br />If developer use handler, drag event is bound at handler only.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-transition">transition</a> ( Integer position ) </pre>
+ </td>
+ <td><p>Transition Drawer widget.<br />This method use only positive integer number.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-open">open</a> ( ) </pre>
+ </td>
+ <td><p>Open Drawer widget.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-close">close</a> ( ) </pre>
+ </td>
+ <td><p>Close Drawer widget.</p></td>
+ </tr>
+
+
+
+ <tr>
+ <td>
+ <pre class="intable prettyprint">String <a href="#method-getState">getState</a> ( ) </pre>
+ </td>
+ <td><p>Get state of Drawer widget.</p></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-setDragHandler">setDragHandler</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Set Drawer drag handler.<br />If developer use handler, drag event is bound at handler only.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">setDragHandler ( Element element) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <h5>Running example in pure JavaScript:</h5>
+ </p>
+ <pre class="prettyprint">
+<!-- Drawer Handlers -->
+<a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+ <header class="ui-header">
+ <h2 class="ui-title">Left Drawer</h2>
+ </header>
+ <div id="leftClose" class="ui-content">
+ <p>Click Close</p>
+ </div>
+</div>
+<script>
+var handler = document.getElementById("leftDrawerHandler"),
+ drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+
+drawer.setDragHandler(handler);
+</script></pre>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">element</span></td>
+ <td>Element</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-transition">transition</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Transition Drawer widget.<br />This method use only positive integer number.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">transition ( Integer position) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <h5>Running example in pure JavaScript:</h5>
+ <pre class="prettyprint">
+<a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+ <header class="ui-header">
+ <h2 class="ui-title">Left Drawer</h2>
+ </header>
+ <div id="leftClose" class="ui-content">
+ <p>Click Close</p>
+ </div>
+</div>
+<script>
+var handler = document.getElementById("leftDrawerHandler"),
+ drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+drawer.Transition(60);
+</script></pre>
+
+ </p>
+ </div>
+
+ <div class="parameters">
+ <p><span class="param">Parameters:</span></p>
+ <table>
+ <tbody>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Required / optional</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">position</span></td>
+ <td>Integer</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-open">open</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Open Drawer widget.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">open ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <h5>Running example in pure JavaScript:</h5>
+ <pre class="prettyprint">
+<!-- Drawer Handlers -->
+<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+ <header class="ui-header">
+ <h2 class="ui-title">Left Drawer</h2>
+ </header>
+ <div id="leftClose" class="ui-content">
+ <p>Click Close</p>
+ </div>
+</div>
+<script>
+ var handler = document.getElementById("leftDrawerHandler"),
+ drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+
+ drawer.open();
+</script></pre>
+
+ </p>
+ </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-close">close</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Close Drawer widget.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">close ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <h5>Running example in pure JavaScript:</h5>
+ <pre class="prettyprint">
+<!-- Drawer Handlers -->
+<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+ <header class="ui-header">
+ <h2 class="ui-title">Left Drawer</h2>
+ </header>
+ <div id="leftClose" class="ui-content">
+ <p>Click Close</p>
+ </div>
+</div>
+<script>
+ var handler = document.getElementById("leftDrawerHandler"),
+ drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+
+ drawer.close();
+</script></pre>
+
+ </p>
+ </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-getState">getState</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Get state of Drawer widget.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">String getState ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+ <h5>Running example in pure JavaScript:</h5>
+ <pre class="prettyprint">
+<!-- Drawer Handlers -->
+<div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+ <header class="ui-header">
+ <h2 class="ui-title">Left Drawer</h2>
+ </header>
+ <div id="leftClose" class="ui-content">
+ <p>Click Close</p>
+ </div>
+</div>
+<script>
+ var handler = document.getElementById("leftDrawerHandler"),
+ drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")),
+ state;
+
+ state = drawer.getState();
+</script></pre>
+
+ </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>Drawer state {"closed"|"opened"|"sliding"|"settling"}</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<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>
+<table class="note">
+ <tbody>
+ <tr>
+ <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>
+ </tr>
+ </tbody>
+</table>
+
+
<h2>How to create Index Scroll Bar</h2>
<p>To use index scroll bar, you can refer following APIs.</p>
</script>
</pre>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
</ul>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
--- /dev/null
+<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>Marquee</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>Marquee</h1>
+
+<p>The Marquee component shows moving HTML element.<br>
+It makes <div> element (has some child nodes such as text and img) move horizontally like legacy <marquee> tag.</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>
+ </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#make-marquee element0.013777208048850298">How to Create Marquee</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-start">start</a>
+ </li>
+ <li><a href="#method-stop">stop</a>
+ </li>
+
+ <li><a href="#method-reset">reset</a>
+ </li>
+
+ </ol>
+
+ </li>
+
+</ol>
+
+<h2><a id='make-marquee element0.013777208048850298'></a>How to Create Marquee</h2>
+
+<p>If you want to create Marquee component, you have to declare "ui-marquee" in <div> element and make Marquee component in JS code.
+<br>To use a Marquee component in your application, please refer following code and marquee options:</p>
+
+<pre class="prettyprint">
+<div class="ui-page ui-page-active" id="marqueePage" >
+ <header class="ui-header">
+ <h2 class="ui-title">Marquee</h2>
+ </header>
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li><div class="ui-marquee" id="marquee">Marquee widget code sample</div></li>
+ </ul>
+ </div>
+</div>
+<script>
+ var page = document.querySelector("#marqueePage");
+
+ page.addEventListener( "pagebeforeshow", function() {
+ var marqueeEl = document.getElementById("marquee"),
+ marqueeWidget = new tau.widget.Marquee(marqueeEl, {marqueeStyle: "scroll", delay: "3"});
+ });
+</script>
+</pre>
+
+
+
+ <h2><a id="options-list"></a>Options</h2>
+ <h3>Summary</h3>
+ <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">marqueeStyle</span></td>
+ <td class="option">"slide" | "scroll" | "alternate"</td>
+ <td class="option">"slide"</td>
+ <td class="option">Sets the default style for the marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">ellipsisEffect</span></td>
+ <td class="option">"gradient" | "ellipsis" | "none"</td>
+ <td class="option">"gradient"</td>
+ <td class="option">Sets the end-effect(gradient) of marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">delay</span></td>
+ <td class="option">number</td>
+ <td class="option">2000</td>
+ <td class="option">Sets the delay(ms) for marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">iteration</span></td>
+ <td class="option">number | "infinite"</td>
+ <td class="option">1</td>
+ <td class="option">Sets the iteration count number for marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">speed</span></td>
+ <td class="option">number</td>
+ <td class="option">60</td>
+ <td class="option">Sets the speed(px/sec) for the marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">timingFunction</span></td>
+ <td class="option">"linear" | "ease" | "ease-in" | "ease-out" | "cubic-bezier(n,n,n,n)"</td>
+ <td class="option">"linear"</td>
+ <td class="option">Sets the timing function for marquee</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">autoRun</span></td>
+ <td class="option">boolean</td>
+ <td class="option">true</td>
+ <td class="option">Sets the status of autoRun</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">marqueestart</span></td>
+ <td><p>Triggered when marquee animation started.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">marqueeend</span></td>
+ <td><p>Triggered when marquee animation ended.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">marqueestopped</span></td>
+ <td><p>Triggered when marquee animation stopped.</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-start">start</a> ( ) </pre>
+ </td>
+ <td><p>Start Marquee animation</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-stop">stop</a> ( ) </pre>
+ </td>
+ <td><p>Stop Marquee animation</p></td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="intable prettyprint"><a href="#method-reset">reset</a> ( ) </pre>
+ </td>
+ <td><p>Reset Marquee animation</p></td>
+ </tr>
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-start">start</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Start Marquee animation</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">start ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p></span>
+ <pre name="code" class="examplecode
+ prettyprint">
+<div class="ui-marquee" id="marquee">
+ <p>MarqueeTEST TEST message TEST for marquee</p>
+</div>
+<script>
+ var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+ marqueeWidget.start();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-stop">stop</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Stop Marquee animation</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">stop ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p></span>
+ <pre name="code" class="examplecode
+ prettyprint">
+<div class="ui-marquee" id="marquee">
+ <p>MarqueeTEST TEST message TEST for marquee</p>
+</div>
+<script>
+ var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+ marqueeWidget.stop();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-reset">reset</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>Reset Marquee animation (reset and end)</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">reset ( ) </pre>
+ </div>
+
+ <div class="description">
+ <p>
+
+ </p>
+ </div>
+
+
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ <div class="example">
+ <span class="example"><p>Code
+ example:</p></span>
+ <pre name="code" class="examplecode
+ prettyprint">
+<div class="ui-marquee" id="marquee">
+ <p>MarqueeTEST TEST message TEST for marquee</p>
+</div>
+<script>
+ var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+ marqueeWidget.reset();
+</script>
+</pre>
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
--- /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>PageIndicator</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>PageIndicator</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>
+
+<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>
+ </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#manual-constructor">How to Create PageIndicator</a>
+
+ </li>
+
+ <li><a href="#options-list">Options</a>
+
+ </li>
+
+ <li><a href="#methods-list">Methods</a>
+
+ <ol class="toc">
+
+ <li><a href="#method-setActive">setActive</a>
+ </li>
+
+ </ol>
+ </li>
+
+</ol>
+
+<h2><a id='manual-constructor'></a>How to Create PageIndicator</h2>
+
+<p>For manual creation of PageIndicator, you can use constructor from <strong>tau</strong> namespace:</p>
+
+<pre class="prettyprint">var elPageIndicator = document.getElementById("pageindicator"),
+ pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages : 5 });
+</pre>
+
+<p>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>
+
+<pre class="prettyprint"> <div id="pageIndicator" class="ui-page-indicator"></div>
+ <script>
+ var elPageIndicator = document.getElementById("pageIndicator"),
+ pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 }),
+ index = 1;
+ pageIndicator.setActive(index);
+</script>
+</pre>
+
+<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>
+
+<pre class="prettyprint">
+<div id="pageIndicatorPage" class="ui-page">
+ <header class="ui-header">
+ <h2 class="ui-title">Page Indicator</h2>
+ </header>
+ <div id="pageIndicator" class="ui-page-indicator"></div>
+ <div id="hsectionchanger" class="ui-content">
+ <div>
+ <section class="ui-section-active" style="text-align:center" >
+ <h3> Page1 of 5</h3>
+ </section>
+ <section style="text-align:center">
+ <h3> Page2 of 5</h3>
+ </section>
+ <section style="text-align:center">
+ <h3> Page3 of 5</h3>
+ </section>
+ <section style="text-align:center">
+ <h3> Page4 of 5 </h3>
+ </section>
+ <section style="text-align:center">
+ <h3> Page5 of 5 </h3>
+ </section>
+ </div>
+ </div>
+ <script>
+ (function() {
+ var self = this,
+ page = document.getElementById( "pageIndicatorPage" ),
+ changer = document.getElementById( "hsectionchanger" ),
+ sectionChanger,
+ elPageIndicator = document.getElementById("pageIndicator"),
+ pageIndicator,
+ pageIndicatorHandler;
+
+ page.addEventListener( "pagebeforeshow", function() {
+ // Create PageIndicator
+ pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5 });
+ pageIndicator.setActive(0);
+
+ sectionChanger = new tau.widget.SectionChanger(changer, {
+ circular: true,
+ orientation: "horizontal",
+ useBouncingEffect: true
+ });
+ });
+
+ page.addEventListener( "pagehide", function() {
+ sectionChanger.destroy();
+ pageIndicator.destroy();
+ });
+
+ // Indicator setting handler
+ pageIndicatorHandler = function (e) {
+ pageIndicator.setActive(e.detail.active);
+ };
+
+ // Bind the callback
+ changer.addEventListener("sectionchange", pageIndicatorHandler, false);
+ })();
+ </script>
+</div>
+</pre>
+
+<p>If you use the following statement when you create page indicator component, a central dot is assigned to multiple pages.</p>
+
+<pre class="prettyprint">
+pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: 5, maxPage: 3 });
+</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">maxPage</span></td>
+ <td class="option">number</td>
+ <td class="option">5</td>
+ <td class="option"><p>the maximum number of pages(dots) which can be displayed on screen</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">numberOfPages</span></td>
+ <td class="option">number</td>
+ <td class="option">null</td>
+ <td class="option">the number of pages to be linked <strong>(mandatory)</strong></td>
+ </tr>
+
+ </tbody>
+ </table>
+<br>
+<p>
+Take an example : the situation that the value of numberOfPages is "5"(5 pages in all), and the value of maxPage is "3"(3 dots).<br>
+When you scroll the page(or section) horizontally, the number of exceeding pages( in this case, it is 2 pages, which is the result of 5 - 3 )<br>
+would be indicated by the central dot, from middle of the pages.<br>
+<br>
+So, the first dot is for the first page, and the last dot is for the fifth( the last) page.<br>
+And the middle dot is shared by 2nd, 3rd and 4th page while scrolling pages.<br>
+<br>
+In the case of even value of maxPage( the number of dots on the screen), the next order of half of the maxPage value would work as middle dot.<br>
+For example, in the situation that the value of numberOfPages is "6", and the value of maxPage is "4", the 3rd dot( the result of 4 / 2 + 1) would indicate
+3rd, 4th and 5th pages as middle dot.<br>
+<br>
+Of course, the value of numberOfPages should meet the number of the pages you have added to HTML.<br>
+<br>
+And if the the value of maxPage(dots) exceeds the value of numberOfPages, the value of maxPage would be changed to the value of numberOfPages.<br>
+For example, in the situation that the value of numberOfPages is "6", and the value of maxPage is "100",there would be still 6 dots on the screen.
+</P>
+
+
+ <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-setActive">setActive</a> ( number index ) </pre>
+ </td>
+ <td><p>This method sets a dot to active state.</p></td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ <dl>
+
+
+ <dt class="method"><code><b><span class="methodName"
+ id="method-setActive">setActive</span></b></code></dt>
+ <dd>
+ <div class="brief">
+ <p>This method sets a dot to active state.</p>
+ </div>
+ <div class="synopsis">
+ <pre class="signature prettyprint">setActive ( 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>index which is active state.</td>
+ </tr>
+
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="returntype">
+ <p><span class="return">Return value:</span></p>
+
+
+ No Return Value
+
+ </div>
+
+ </dd>
+
+
+ </dl>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<p>To open a pop-up window from a link, use the <span style="font-family: Courier New,Courier,monospace">data-rel</span> attribute in HTML markup as in the following code:
</p>
<pre class="prettyprint"><a href="#popup" class="ui-btn" data-rel="popup">Open popup when clicking this element.</a></pre>
-<p>The following table shows examples of various types of popups.</p>
+<p>And also, popup is opened by link with ID as mentioned. So the id in the link and the the id the of popup page listed below should have the same id to be opened.</p>
+<p>The following table shows examples of various types of popups. If you want to implement the examples with above 'opening' code, be sure to meet the same id.</p>
<table>
<caption>Table: Popup type examples</caption>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">popupcreate</span></td>
- <td>Triggered when the pop-up has been created in the DOM (for example, through Ajax) but before all UI components have had an opportunity to enhance the contained markup.</td>
+ <td>Triggered when the pop-up has been created in the DOM (for example, through Ajax) but before all UI Components have had an opportunity to enhance the contained markup.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">popupbeforehide</span></td>
</script>
</pre></pre>
-<p>Because popup works in asynchronous way due to animation, the features of popup need to work under event like below code:<br>
+<p>Because popup works in asynchronos way due to animation, the features of popup need to work under event like below code:<br>
If popup is opened or closed by only openPopup() or closePopup() method,
it might occur exceptional errors or bugs.<br>
So it is highly recommended to handle the feature by using event.</p>
</tbody>
</table>
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<h1>Processing</h1>
<p>The processing component shows on the screen that an operation is in progress.</p>
+<p>Two size of processing components are supported by TAU. please refer this document.</p>
+
+
+
+
<h2>Table of Contents</h2>
<ol class="toc">
+
+
<li><a href="#html-example">HTML Examples</a></li>
+
+
</ol>
<h2 id="html-example">HTML Examples</h2>
-<h3>Processing Component</h3>
-<p>To add a processing component to the application, use the following code:</p>
+<h3>small processing component</he>
+<p>To add a small processing component to the application, use the following code:</p>
<pre class="prettyprint">
<div class="ui-processing"></div>
<div class="ui-processing-text">
</div>
</pre>
+<h3>Full size processing component</h3>
+<p>To add a <b>FULL SIZE</b> processing component to the application, you need to declare processing html in page level.<br>
+Please use the following code:</p>
+
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component(full-size processing) is supported since <strong>2.3</strong>.</td>
+ </tr>
+ </tbody>
+</table>
+
+<pre class="prettyprint"><div class="ui-page">
+ <header class="ui-header">
+ <h2 class="ui-title">Processing</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...
+ </div>
+ <div class="ui-processing ui-processing-full-size"></div>
+</div>
+</pre>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
<li>If you implement a <span style="font-family: Courier New,Courier,monospace">div</span> element that can choose 2 classes (<span style="font-family: Courier New,Courier,monospace">ui-progress-proportion</span> or <span style="font-family: Courier New,Courier,monospace">ui-progress-ratio</span>) and a <span style="font-family: Courier New,Courier,monospace">progress</span> element on the same level, you show two elements on the screen (the proportion information is located left below and the ratio information is located right below).</li>
</ul>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">If you want to use Circular-shape progressbar, please refer <a href="widget_circleprogressbar.htm">CircleProgressBar</a> component.</td>
+ </tr>
+ </tbody>
+</table>
+
+
<p>The following table describes the supported progress classes.</p>
<table>
<caption>Table: Popup classes</caption>
<div class="ui-progress-ratio">50%</div>
</pre>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
<h1>UI Component Reference</h1>
-<p>The Tizen Wearable Web UI framework provides rich Tizen wearable UI components that are optimized for the Tizen wearable Web application. You can use the UI components for:</p>
+<p>The Tizen Wearable Web UI framework provides rich Tizen Wearable UI Components that are optimized for the Tizen Wearable Web application. You can use the UI Components for:</p>
<ul>
<li>CSS animation</li>
<li>Rendering</li>
</ul>
-<p>The following table displays the UI components provided by the Tizen Wearable Web UI framework.</p>
+<p>The following table displays the UI Components provided by the Tizen Wearable Web UI framework.</p>
<table border="1">
- <caption>Table: Tizen Wearable Web UI components</caption>
+ <caption>Table: Tizen Wearable Web UI Components</caption>
<tbody>
<tr>
- <th>UI component</th>
+ <th>UI Component</th>
<th>Description</th>
</tr>
<tr>
<td>Shows a list of options where 1 or more can be selected.</td>
</tr>
<tr>
+ <td><a href="widget_circleprogressbar.htm">Circle ProgressBar</a></td>
+ <td>Shows a control that indicates the progress percentage of an on-going operation by circular shape.</td>
+ </tr>
+ <tr>
+ <td><a href="widget_circularindexscrollbar.htm">Circular IndexScrollbar</a></td>
+ <td>Shows a circularindexscrollbar with indeces, usually for the list.</td>
+ </tr>
+ <tr>
+ <td><a href="widget_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="widget_indexscrollbar.htm">Index scroll bar</a></td>
<td>Shows an index scroll bar with indices, usually for the list.</td>
</tr>
+
+
<tr>
<td><a href="widget_list.htm">List</a></td>
<td>Shows a list view.</td>
</tr>
<tr>
+ <td><a href="widget_marquee.htm">Marquee</a></td>
+ <td>Shows a component which moves left and right.</td>
+ </tr>
+ <tr>
+ <td><a href="widget_pageindicator.htm">Page Indicator</a></td>
+ <td>Shows a dot-style page indicator.</td>
+ </tr>
+ <tr>
<td><a href="widget_popup.htm">Popup</a></td>
<td>Shows a pop-up window.</td>
</tr>
<td>Shows a control that you can use to change values by dragging a handle on a horizontal scale.</td>
</tr>
<tr>
+ <td><a href="widget_snaplistview.htm">SnapListview</a></td>
+ <td>Shows a snap listview that you can detect which item be positioned at center.</td>
+ </tr>
+ <tr>
<td><a href="widget_swipelist.htm">Swipe list</a></td>
<td>Shows a list where you can swipe horizontally through a list item to perform a specific task.</td>
</tr>
</tbody>
</table>
+ <h2>Where to Go Next</h2>
+<ul>
+<li><a href="../index.htm">Tizen Wearable Web UI Framework Reference</a></li></ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<h1>Section Changer</h1>
-<p>The section changer component provides an application architecture, which has multiple sections on a page and enables scrolling through the <span style="font-family: Courier New,Courier,monospace"><section></span> elements.</p>
-
+<p>The section changer component provides an application architecture, which has multiple sections on one page.<br>
+With Section changer on one page, you can scroll the <span style="font-family: Courier New,Courier,monospace"><section></span> elements horizontally or vertically without changing current page to another.</p><p>
+It gets to have a virtue of needlessness of changing page and the existance of same header within multiple <span style="font-family: Courier New,Courier,monospace"><section></span> elements.</p>
<h2>Table of Contents</h2>
<ol class="toc">
element = document.getElementById("sectionchanger"),
sectionChanger, idx=1;
- page.addEventListener("pageshow", function()
- {
+ page.addEventListener("pageshow", function() {
/* Create the SectionChanger object */
- sectionChanger = new tau.SectionChanger(element,
- {
+ sectionChanger = tau.widget.SectionChanger(element, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
- page.addEventListener("pagehide", function()
- {
+ page.addEventListener("pagehide", function() {
/* Release the object */
sectionChanger.destroy();
});
</dl>
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
<p>To add a slider component to the application, use the following code:</p>
-<pre class="prettyprint">
-<input type="range" />
+<pre class="prettyprint"><div class="ui-page">
+ <header class="ui-header">
+ <h2 class="ui-title">Slider</h2>
+ </header>
+ <div class="ui-content content-padding">
+ Slider length can be modified by the width style.
+ <input type="range" />
+ </div>
+</div>
</pre>
+<p>If you want to modify the width of the slider,please change the length with width style.</p>
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+</ul>
+
<div id="footer">
<hr size="1" />
--- /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>SnapListview</title>
+</head>
+<body onload="prettyPrint()" id="content">
+<h1>SnapListview</h1>
+
+
+<p>Shows a snap list view. It detects center-positioned list item when scroll end.</p>
+<p>When scroll event started, SnapListview triggers "scrollstart" event, and scroll event ended, triggers "scrollend" event.<br>
+When scroll ended, it triggers "selected" event and attach class to detected(center-positioned) item.</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>
+ </tbody>
+</table>
+
+<h2>Table of Contents</h2>
+<ol class="toc">
+
+ <li><a href="#default-selectors0.06779201747849584">How to create SnapListview</a>
+
+ </li>
+
+ <li><a href="#default-using0.06779201747849584">Usage of SnapListview</a>
+
+ </li>
+
+ <li><a href="#events-list">Events</a>
+
+ </li>
+
+</ol>
+
+<h2><a id='default-selectors0.06779201747849584'></a>How to create SnapListview</h2>
+
+<p>Selector for snap listview widget is class <em>ui-snap-listview</em>.</p>
+
+<p>To add a list widget to the application, use the following code:</p>
+
+<h3><a id='list-with basic items0.7933700433932245'></a>List with basic items</h3>
+
+<p>You can add a basic listview as follows:</p>
+
+<pre class="prettyprint"><ul class="ui-listview ui-snap-listview" id="snapList">
+ <li>1line</li>
+ <li>2line</li>
+ <li>3line</li>
+ <li>4line</li>
+ <li>5line</li>
+</ul>
+</pre>
+
+<p>In javascript code, you can make your list as SnapListview component as follows:</p>
+<pre class="prettyprint"><script>
+var snapList = document.getElementById("snapList"),
+ snapListComponent = tau.widget.SnapListview(snapList);
+</script>
+</pre>
+
+<h2><a id='default-using0.06779201747849584'></a>Usage of SnapListview</h2>
+
+<p>You can make your app more effectively with this SnapListview Component and <a href="widget_marquee.htm">Marquee Component</a>.</p>
+
+<p>When "selected" event triggered, center-positioned list item can be expand with sub text. Also, we can make main text move with Marquee.<br><br>
+
+TAU supported helper script named <a href="../helper/helper_listmarqueestyle.htm">SnapListMarqueeStyle</a>. You can use tau.helper.SnapListMarqueeStyle to make your application more nice.</p>
+
+
+ <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">scrollstart</span></td>
+ <td><p>Triggered when snaplist scoll started.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">scrollend</span></td>
+ <td><p>Triggered when snaplist scoll ended.</p></td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">selected</span></td>
+ <td><p>Triggered when snaplist detects center-positioned list item.</p></td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="./widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+<div id="footer">
+ <hr size="1">
+ <font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a
+ href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution
+ 3.0</a> and all of the Code Examples contained herein are licensed under <a
+ href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the
+ <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
+</div>
+</body>
+</html>
<h1>Swipe List</h1>
-<p>The swipe list component shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task. For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.</p>
+<p>The swipe list component shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task.<p>
+For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.<p>
+You can set the details when swiping such as elements that appear, background color and the property of the animation.<p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This component is released for <strong>2.3 rectangular UI</strong>. <br>
+ When you create this component in round screen, layout can be shown broken because screen hide swipe widget.</td>
+ </tr>
+ </tbody>
+</table>
<h2>Table of Contents</h2>
<ol class="toc">
</ol>
<h2 id="manual-constructor">How to Create Swipe List</h2>
-<p>To add a swipe list component to the application, use the following code:</p>
-
-<pre class="prettyprint"><pre class="prettyprint" style="border:0px; margin:0px">
-<div class="ui-content">
- <!--List items that can be swiped-->
- <ul class="ui-listview ui-swipelist-list">
- <li>Andrew</li>
- <li>Bill</li>
- <li>Christina</li>
- <li>Daniel</li>
- <li>Edward</li>
- <li>Peter</li>
- <li>Sam</li>
- <li>Tom</li>
- </ul>
- <!--Swipe actions-->
- <div class="ui-swipelist">
- <div class="ui-swipelist-left">
- <div class="ui-swipelist-icon"></div>
- <div class="ui-swipelist-text">Calling</div>
- </div>
- <div class="ui-swipelist-right">
- <div class="ui-swipelist-icon"></div>
- <div class="ui-swipelist-text">Message</div>
- </div>
- </div>
-</div></pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
-<script>
- (function()
- {
- var page = document.getElementById("swipelist"),
- listElement = page.getElementsByClassName("ui-swipelist-list")[0],
- swipeList;
- page.addEventListener("pageshow", function()
- {
- /* Make swipe list object */
- swipeList = new tau.widget.SwipeList(listElement,
- {
- swipeTarget: "li",
- swipeElement: ".ui-swipelist"
- });
- });
- page.addEventListener("pagehide", function()
- {
- /* Release object */
- swipeList.destroy();
- });
- })();
-</script>
-</pre></pre>
+<p>In the following, left swipe shows "Calling" text and right swipe shows "Message" on the list item.</p>
+<h3>HTML</h3>
+<pre class="prettyprint">
+<div class="ui-page" id="pageSwipeList">
+ <div class="ui-content">
+ <!--List items that can be swiped-->
+ <ul class="ui-listview ui-swipelist-list">
+ <li>Andrew</li>
+ <li>Bill</li>
+ <li>Christina</li>
+ <li>Daniel</li>
+ <li>Edward</li>
+ <li>Peter</li>
+ <li>Sam</li>
+ <li>Tom</li>
+ </ul>
+ <!--Swipe actions-->
+ <div class="ui-swipelist">
+ <div class="ui-swipelist-left">
+ <div class="ui-swipelist-icon"></div>
+ <div class="ui-swipelist-text">Calling</div>
+ </div>
+ <div class="ui-swipelist-right">
+ <div class="ui-swipelist-icon"></div>
+ <div class="ui-swipelist-text">Message</div>
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
+<h3>JavaScript</h3>
+<pre class="prettyprint">
+(function() {
+ var page = document.getElementById("pageSwipeList"),
+ listElement = page.getElementsByClassName("ui-swipelist-list")[0],
+ swipeList;
+ page.addEventListener("pageshow", function() {
+ /* Make swipe list object */
+ swipeList = new tau.widget.SwipeList(listElement, {
+ swipeTarget: "li",
+ swipeElement: ".ui-swipelist"
+ });
+ });
+ page.addEventListener("pagehide", function() {
+ /* Release object */
+ swipeList.destroy();
+ });
+})();
+</pre>
<h2 id="options-list">Options</h2>
})();
</pre>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
</li>
</ul></pre>
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a 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>
<p>The virtual list component is used to display a list of unlimited data elements. The component provides easy access to databases to retrieve and display data. The virtual list component is based on a result set which has a fixed size defined by the developer using the <span style="font-family: Courier New,Courier,monospace">data-row</span> attribute. A result set must be at least 3 times bigger than size of a clip (number of visible elements).</p>
-<h2>Table of Contents</h2>
-
<ol class="toc">
<li><a href="#manual-constructor">How to Create Virtual List</a>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="../../lib/tau/js/virtuallist.js"></script></pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">/* JSON DATA example in virtuallist-db-demo.js */
var JSON_DATA =
-{
+[
{NAME:"Abdelnaby, Alaa"},
{NAME:"Abdul-Aziz, Zaid"},
{NAME:"Abdul-Jabbar, Kareem"},
{NAME:"Abdul-Rauf, Mahmoud"},
- {NAME:"Abdul-Wahad, Tariq"},
+ {NAME:"Abdul-Wahad, Tariq"}
/* Other list items */
-}
+]
</pre></pre>
</li>
/* Get HTML element reference */
var elList = document.getElementById("vlist"),
/* All config options can be found in virtual list reference */
- vlist = tau.widget.VirtualListview(elList,
- {
+ vlist = tau.widget.VirtualListview(elList, {
dataLength: JSON_DATA.length,
bufferSize: 40
});
/* Update list items */
-vlist.setListItemUpdater(function(elListItem, newIndex)
-{
+vlist.setListItemUpdater(function(elListItem, newIndex) {
var data = JSON_DATA[newIndex];
elListItem.innerHTML = '<span class="ui-li-text-main">' + data.NAME + '</span>';
});
<li>When you no longer need the component, destroy it using the <span style="font-family: Courier New,Courier,monospace">destroy()</span> method:</p>
<pre class="prettyprint">
-page.addEventListener("pagehide", function()
-{
+page.addEventListener("pagehide", function() {
vlist.destroy();
});
</pre></li>
</tbody>
</table>
+
+<h2>Where to Go Next</h2>
+<ul>
+ <li><a href="widget_reference.htm">UI Component Reference</a></li>
+
+</ul>
+
<div id="footer">
<hr size="1" />
<font size="1">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</font>
projects / sdk / online-doc.git / commitdiff
