Move tokentextarea demo to external page.

Change-Id: Ie92c45c82085db877510968bc955a5665a0390c0

diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html
index f2633f2..33d0f0a 100644 (file)
--- a/demos/tizen-winsets/index.html
+++ b/demos/tizen-winsets/index.html
@@ -45,7 +45,7 @@
                                <li><a href="widgets/slider/slider.html">Slider</a></li>
                                <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
                                <li><a href="widgets/buttonGrouping.html">Group Control(new segment)</a></li>
-                               <li><a href="#tokentextarea">Token Text Area</a></li>
+                               <li><a href="widgets/tokentextarea/tokentextarea.html" data-ajax="false">Token Text Area</a></li>
 
                                <li data-role="list-divider">Page Layout</li>
                                <li><a href="widgets/naviframe/naviframe.html">Naviframe</a></li>
@@ -106,80 +106,6 @@
                </div>
        </div>
 
-       <div data-role="page" id="tokentextarea" data-add-back-btn="true">
-               <div data-role="header" data-position="fixed">
-                       <h1>Token Text Area</h1>
-               </div>
-               <div data-role="content">
-                       <div data-role="tokentextarea" data-link="#addressbook"></div>
-                       <br>
-                       <ul data-role="listview">
-                               <li><a id='MBTaddItemTest'>Append Item</a></li>
-                               <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
-                               <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
-                               <li><a id='MBTgetInputTextTest'>Get input text</a></li>
-                               <li><a id='MBTselectItemTest'>Select 1</a></li>
-                               <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
-                               <li><a id='MBTlengthTest'>Length</a></li>
-                               <li><a id='MBTfocusOutTest'>Grouping On</a></li>
-                               <li><a id='MBTfocusInTest'>Grouping Off</a></li>
-                               <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
-                       </ul>
-               </div>
-               <div data-role="footer">
-               </div>
-       </div>
-       <div data-role="page" id="addressbook">
-               <div data-role="header" data-position="fixed">
-                       <h1>Address Book</h1>
-               </div>
-               <div data-role="content" id="contentList">
-                       <ul data-role="listview">
-                               <li data-role="list-divider">A</li>
-                               <li><a href="#tokentextarea">Adam Kinkaid</a></li>
-                               <li><a href="#tokentextarea">Alex Wickerham</a></li>
-                               <li><a href="#tokentextarea">Avery Johnson</a></li>
-                               <li data-role="list-divider">B</li>
-                               <li><a href="#tokentextarea">Bob Cabot</a></li>
-                               <li data-role="list-divider">C</li>
-                               <li><a href="#tokentextarea">Caleb Booth</a></li>
-                               <li><a href="#tokentextarea">Christopher Adams</a></li>
-                               <li><a href="#tokentextarea">Culver James</a></li>
-                               <li data-role="list-divider">D</li>
-                               <li><a href="#tokentextarea">David Walsh</a></li>
-                               <li><a href="#tokentextarea">Drake Alfred</a></li>
-                               <li data-role="list-divider">E</li>
-                               <li><a href="#tokentextarea">Elizabeth Bacon</a></li>
-                               <li><a href="#tokentextarea">Emery Parker</a></li>
-                               <li><a href="#tokentextarea">Enid Voldon</a></li>
-                               <li data-role="list-divider">F</li>
-                               <li><a href="#tokentextarea">Francis Wall</a></li>
-                               <li data-role="list-divider">G</li>
-                               <li><a href="#tokentextarea">Graham Smith</a></li>
-                               <li><a href="#tokentextarea">Greta Peete</a></li>
-                               <li data-role="list-divider">H</li>
-                               <li><a href="#tokentextarea">Harvey Walls</a></li>
-                               <li data-role="list-divider">M</li>
-                               <li><a href="#tokentextarea">Mike Farnsworth</a></li>
-                               <li><a href="#tokentextarea">Murray Vanderbuilt</a></li>
-                               <li data-role="list-divider">N</li>
-                               <li><a href="#tokentextarea">Nathan Williams</a></li>
-                               <li data-role="list-divider">P</li>
-                               <li><a href="#tokentextarea">Paul Baker</a></li>
-                               <li><a href="#tokentextarea">Pete Mason</a></li>
-                               <li data-role="list-divider">R</li>
-                               <li><a href="#tokentextarea">Rod Tarker</a></li>
-                               <li data-role="list-divider">S</li>
-                               <li><a href="#tokentextarea">Sawyer Wakefield</a></li>
-                       </ul>
-               </div> <!--/content -->
-               <div data-role="footer">
-                       <div align="right">
-                               <a href="#tokentextarea" data-role="button" style="margin-right : 1em;">Cancel</a>
-                       </div>
-               </div>
-       </div> <!--/page -->
-
        <script src="widgets/checkbox/checkbox.js"></script>
        <script src="widgets/radio/radio.js"></script>
        <script src="widgets/progressbar.js"></script>
@@ -189,7 +115,6 @@
        <script src="tips/two-line-text/two-line-text.js"></script>
        <script src="tips/list-sample/list-sample.js"></script>
        <script src="tips/pinch-event/pinch.js"></script>
-       <script src="widgets/tokentextarea-demo.js"></script>
        <script src="widgets/pagelayout/barcontrol.js"></script>
        <script src="widgets/pagelayout/backbutton-control.js"></script>
        <script src="widgets/list/list-edit.js"></script>

diff --git a/demos/tizen-winsets/widgets/tokentextarea-demo.js b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea-demo.js
similarity index 68%
rename from demos/tizen-winsets/widgets/tokentextarea-demo.js
rename to demos/tizen-winsets/widgets/tokentextarea/tokentextarea-demo.js
index 4cf7a73..d4f070f 100644 (file)
--- a/demos/tizen-winsets/widgets/tokentextarea-demo.js
+++ b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea-demo.js
@@ -1,61 +1,61 @@
 ( function ( $, window ) {
-       $( document ).ready( function () {
-               $( "#MBTaddItemTest" ).click( function () {
+       $(document).one("pagecreate", "#tokentextarea", function () {
+               $( "#MBTaddItemTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "add", "additem" );
                });
 
-               $( "#MBTremoveItemTest" ).click( function () {
+               $( "#MBTremoveItemTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "remove", 0 );
                });
 
-               $( "#MBTinputTextTest" ).click( function () {
+               $( "#MBTinputTextTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "inputText", "Hello~~~" );
                });
 
-               $( "#MBTgetInputTextTest" ).click( function () {
+               $( "#MBTgetInputTextTest" ).on( "click", function () {
                        var input = $( ":jqmData(role='tokentextarea')" ).tokentextarea( "inputText" );
                        window.alert( "input String : " + input );
                });
 
-               $( "#MBTremoveAllItemTest" ).click( function () {
+               $( "#MBTremoveAllItemTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "remove" );
                        $( ":jqmData(role='tokentextarea')" ).parents( ".ui-scrollview-view" ).parent().scrollview( "scrollTo", 0, 0 );
                });
 
-               $( "#MBTgetSelectedItemTest" ).click( function () {
+               $( "#MBTgetSelectedItemTest" ).on( "click", function () {
                        var content = $( ":jqmData(role='tokentextarea')" ).tokentextarea( "select" );
                        window.alert( "Select content : " + content );
                });
 
-               $( "#MBTselectItemTest" ).click( function () {
+               $( "#MBTselectItemTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "select", 0 );
                });
 
-               $( "#MBTlengthTest" ).click( function () {
+               $( "#MBTlengthTest" ).on( "click", function () {
                        var length = $( ":jqmData(role='tokentextarea')" ).tokentextarea( "length" );
                        window.alert( "length : " + length );
                });
 
-               $( "#MBTfocusInTest" ).click( function () {
+               $( "#MBTfocusInTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "focusIn", 0 );
                        $( ":jqmData(role='tokentextarea')" ).parents( ".ui-scrollview-view" ).parent().scrollview( "scrollTo", 0, 0 );
                });
 
-               $( "#MBTfocusOutTest" ).click( function () {
+               $( "#MBTfocusOutTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "focusOut", 0 );
                        $( ":jqmData(role='tokentextarea')" ).parents( ".ui-scrollview-view" ).parent().scrollview( "scrollTo", 0, 0 );
                });
 
-               $( "#MBTdestroyTest" ).click( function () {
+               $( "#MBTdestroyTest" ).on( "click", function () {
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "destroy" );
                });
 
-               $( "#contentList a" ).click( function () {
+               $( "#contentList a" ).on( "click", function () {
                        var arg = $( this ).text();
                        $( ":jqmData(role='tokentextarea')" ).tokentextarea( "add", arg );
                });
 
-               $( "#cancelBtn" ).click( function () {
+               $( "#cancelBtn" ).on( "click", function () {
                        $.mobile.changePage( "#tokentextarea", {
                                transition: "reverse slide",
                                reverse: false,

diff --git a/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html
new file mode 100644 (file)
index 0000000..b34bf84
--- /dev/null
+++ b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+       <head>
+               <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+               <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+               <script src="../../configure.js"></script>
+               <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+               <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+                               data-framework-theme="tizen-white"
+                               data-framework-viewport-width="device-width">
+               </script>
+               <script src="../../main.js"></script>
+               <script src="tokentextarea-demo.js"></script>
+               <link rel="stylesheet" href="../../custom.css" />
+
+               <title>Tizen UI - Tokentextarea</title>
+
+               <!-- for compatibility test -->
+               <meta name="apple-mobile-web-app-capable" content="yes" />
+               <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+               <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+       </head>
+       <body>
+               <div data-role="page" id="tokentextarea" data-add-back-btn="true">
+                       <div data-role="header" data-position="fixed">
+                               <h1>Token Text Area</h1>
+                       </div>
+                       <div data-role="content">
+                               <div data-role="tokentextarea" data-link="#addressbook"></div>
+                               <br>
+                               <ul data-role="listview">
+                                       <li><a id='MBTaddItemTest'>Append Item</a></li>
+                                       <li><a id='MBTremoveItemTest'>Remove first Item</a></li>
+                                       <li><a id='MBTinputTextTest'>Input 'Hello'</a></li>
+                                       <li><a id='MBTgetInputTextTest'>Get input text</a></li>
+                                       <li><a id='MBTselectItemTest'>Select 1</a></li>
+                                       <li><a id='MBTgetSelectedItemTest'>Selected item</a></li>
+                                       <li><a id='MBTlengthTest'>Length</a></li>
+                                       <li><a id='MBTfocusOutTest'>Grouping On</a></li>
+                                       <li><a id='MBTfocusInTest'>Grouping Off</a></li>
+                                       <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
+                               </ul>
+                       </div>
+                       <div data-role="footer">
+                       </div>
+               </div>
+               <div data-role="page" id="addressbook">
+                       <div data-role="header" data-position="fixed">
+                               <h1>Address Book</h1>
+                       </div>
+                       <div data-role="content" id="contentList">
+                               <ul data-role="listview">
+                                       <li data-role="list-divider">A</li>
+                                       <li><a href="#tokentextarea">Adam Kinkaid</a></li>
+                                       <li><a href="#tokentextarea">Alex Wickerham</a></li>
+                                       <li><a href="#tokentextarea">Avery Johnson</a></li>
+                                       <li data-role="list-divider">B</li>
+                                       <li><a href="#tokentextarea">Bob Cabot</a></li>
+                                       <li data-role="list-divider">C</li>
+                                       <li><a href="#tokentextarea">Caleb Booth</a></li>
+                                       <li><a href="#tokentextarea">Christopher Adams</a></li>
+                                       <li><a href="#tokentextarea">Culver James</a></li>
+                                       <li data-role="list-divider">D</li>
+                                       <li><a href="#tokentextarea">David Walsh</a></li>
+                                       <li><a href="#tokentextarea">Drake Alfred</a></li>
+                                       <li data-role="list-divider">E</li>
+                                       <li><a href="#tokentextarea">Elizabeth Bacon</a></li>
+                                       <li><a href="#tokentextarea">Emery Parker</a></li>
+                                       <li><a href="#tokentextarea">Enid Voldon</a></li>
+                                       <li data-role="list-divider">F</li>
+                                       <li><a href="#tokentextarea">Francis Wall</a></li>
+                                       <li data-role="list-divider">G</li>
+                                       <li><a href="#tokentextarea">Graham Smith</a></li>
+                                       <li><a href="#tokentextarea">Greta Peete</a></li>
+                                       <li data-role="list-divider">H</li>
+                                       <li><a href="#tokentextarea">Harvey Walls</a></li>
+                                       <li data-role="list-divider">M</li>
+                                       <li><a href="#tokentextarea">Mike Farnsworth</a></li>
+                                       <li><a href="#tokentextarea">Murray Vanderbuilt</a></li>
+                                       <li data-role="list-divider">N</li>
+                                       <li><a href="#tokentextarea">Nathan Williams</a></li>
+                                       <li data-role="list-divider">P</li>
+                                       <li><a href="#tokentextarea">Paul Baker</a></li>
+                                       <li><a href="#tokentextarea">Pete Mason</a></li>
+                                       <li data-role="list-divider">R</li>
+                                       <li><a href="#tokentextarea">Rod Tarker</a></li>
+                                       <li data-role="list-divider">S</li>
+                                       <li><a href="#tokentextarea">Sawyer Wakefield</a></li>
+                               </ul>
+                       </div> <!--/content -->
+                       <div data-role="footer">
+                               <div align="right">
+                                       <a href="#tokentextarea" data-role="button" style="margin-right : 1em;">Cancel</a>
+                               </div>
+                       </div>
+               </div> <!--/page -->
+       </body>
+</html>