summaryrefslogtreecommitdiff
path: root/demos/tizen-winsets/index.html
diff options
context:
space:
mode:
authorMinkyu Kang <mk7.kang@samsung.com>2012-09-10 17:04:29 +0900
committerMinkyu Kang <mk7.kang@samsung.com>2012-09-10 17:04:29 +0900
commitf3bc06001f660ef156e0895f4be1e81a0ac99502 (patch)
tree4319859b727600c6d8382b95e68a0c0d52cf38f0 /demos/tizen-winsets/index.html
parentb087adb7b7df900f9656425e5cea9dc7abdf935b (diff)
downloadweb-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.gz
web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.bz2
web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.zip
Revert "Export"
This reverts commit b087adb7b7df900f9656425e5cea9dc7abdf935b.
Diffstat (limited to 'demos/tizen-winsets/index.html')
-rwxr-xr-xdemos/tizen-winsets/index.html1152
1 files changed, 1152 insertions, 0 deletions
diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html
new file mode 100755
index 00000000..85506cfa
--- /dev/null
+++ b/demos/tizen-winsets/index.html
@@ -0,0 +1,1152 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="configure.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+ <script src="main.js"></script>
+ <link rel="stylesheet" href="custom.css" />
+
+ <title>Tizen UI</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" />
+ <link rel="stylesheet" href="./widgets/grid/css/namecard.css" />
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Tizen UI</h1>
+ </div>
+ <div data-role="content">
+ <p id="current_date"></p>
+ <p id="html_font_size"></p>
+ <fieldset data-role="controlgroup" id="input-select-theme">
+ <legend>Select theme</legend>
+ <input type="radio" name="select-theme" id="select-theme-tizen-black" value="tizen-black"/>
+ <label for="select-theme-tizen-black">tizen-black</label>
+ <input type="radio" name="select-theme" id="select-theme-tizen-white" value="tizen-white" checked="true" />
+ <label for="select-theme-tizen-white">tizen-white</label>
+ </fieldset>
+ <script>
+ $( document ).one( "pagecreate", function ( ) {
+ $("#input-select-theme").find("input[name='select-theme']").bind( "change",
+ function ( ev, data ) {
+ var radio = this,
+ theme = "tizen-white";
+ if( radio.checked ) {
+ theme = radio.value;
+ console.log( "Request theme change: " + theme );
+ $.tizen.loadTheme( theme );
+ }
+ }
+ );
+ } );
+ </script>
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li data-role="list-divider">Controls</li>
+ <li><a href="widgets/button/button.html">Button</a></li>
+ <li><a href="widgets/checkbox/checkbox.html">Check</a></li>
+ <li><a href="widgets/switch/switch.html">Switch</a></li>
+ <li><a href="widgets/radio/radio.html">Radio</a></li>
+ <li><a href="widgets/colorpicker.html">Color picker</a></li>
+ <li><a href="widgets/datefield.html">Time picker</a></li>
+ <li><a href="widgets/progressbar.html">Progressbar</a></li>
+ <li><a href="widgets/entry.html">Entry</a></li>
+ <li><a href="widgets/searchbar.html">Searchbar</a></li>
+ <li><a href="#slider-demo">Slider</a></li>
+ <li><a href="widgets/day-selector.html" >Day Selector</a></li>
+ <li><a href="#NavigationbarMain">Navigation Bar</a></li>
+ <li><a href="widgets/imageslider.html">ImageSlider</a></li>
+ <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
+ <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
+ <li><a href="widgets/handler.html">Handler</a></li>
+ <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
+ <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
+ <li data-role="list-divider">ControlBar</li>
+ <li><a href="#controlbar-demo">ControlBar</a></li>
+
+ <li data-role="list-divider">List</li>
+ <li><a href="widgets/list/list.html">List</a></li>
+ <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li>
+ <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
+
+ <li data-role="list-divider">Navigation Bar</li>
+ <li><a href="widgets/segmentctrl.html">Segment Control</a></li>
+ <li><a href="#option-header-demo">Optional Header</a></li>
+
+ <li data-role="list-divider">Popup</li>
+ <li><a href="widgets/popupwindow/popup.html">Popup</a></li>
+ <li><a href="widgets/ctxpopup.html">CxtPopup</a></li>
+
+ <li data-role="list-divider">Notification (ticker)</li>
+ <li><a href="widgets/tickernoti.html">TickerNoti</a></li>
+ <li><a href="widgets/small-popup.html">Small Popup</a></li>
+
+ <li data-role="list-divider">No Contents</li>
+ <li><a href="#no-contents-0">No Contents - Text</a></li>
+ <li><a href="#no-contents-1">No Contents - Picture</a></li>
+ <li><a href="#no-contents-2">No Contents - Multimedia</a></li>
+ <li><a href="#no-contents-3">No Contents - Unnamed</a></li>
+
+ <li data-role="list-divider">Grid view</li>
+ <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li>
+ <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li>
+ <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li>
+ <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li>
+ <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
+ <li data-role="list-divider">Multimedia view</li>
+ <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
+ <li data-role="list-divider">PageLayout</li>
+ <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
+ <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
+
+ <li data-role="list-divider">Programming Tips</li>
+ <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li>
+ <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li>
+ <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li>
+ <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
+ <li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li>
+ <li><a href="tips/page-transition/transition.html">Page transitions</a></li>
+
+
+
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="notImplemented">
+ <div data-role="header" data-position="fixed">
+ <h1>Not Implemented</h1>
+ </div>
+ <div data-role="content">
+ <p> Not Implemented </p>
+ </div>
+ </div>
+
+ <div data-role="page" id="slider-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Slider</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li data-role="list-divider">Normal Slider</li>
+ <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li>
+ <li data-role="list-divider">Popup Slider</li>
+ <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li>
+ <li data-role="list-divider">Icon Slider</li>
+ <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li>
+ <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li>
+ <li data-role="list-divider">Text Slider</li>
+ <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li>
+ <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li>
+ </ul>
+ </div><!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="option-header-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Optional Header</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
+ <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
+ <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+
+ <h1>Option header</h1>
+ <a id="123">TestBtn</a>
+ <a id="opt_text" data-icon="optiontray"></a>
+ <a id="1234">TestBtn</a>
+
+ <div id="myoptionheader1" data-role="optionheader" data-for="opt_text">
+ <div class="ui-grid-a ">
+ <div class="ui-block-a"><a data-role="button">Save</a></div>
+ <div class="ui-block-b"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Option header - 3 buttons</h1>
+ <div id="myoptionheader2" data-role="optionheader">
+ <div class="ui-grid-b ">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Cancel</a></div>
+ <div class="ui-block-c"><a data-role="button">Save</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Option header - 4 buttons</h1>
+ <div id="myoptionheader3" data-role="optionheader">
+ <div class="ui-grid-c ">
+ <div class="ui-block-a"><a data-role="button">Previous</a></div>
+ <div class="ui-block-b"><a data-role="button">Cancel</a></div>
+ <div class="ui-block-c"><a data-role="button">Save</a></div>
+ <div class="ui-block-d"><a data-role="button">Next</a></div>
+ </div>
+ </div>
+ </div>
+ <div data-role="content">
+ <p>Some content would be here</p>
+ </div>
+ </div>
+
+ <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#Tabbar_Main">Tabbar Style</a></li>
+ <li><a href="#Toolbar">Toolbar Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <!-- ControlBar Tabbar Style -->
+ <div data-role="page" id="Tabbar_Main">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
+ <li><a href="#Tabbar2Items">2 Items Style</a></li>
+ <li><a href="#Tabbar3Items">3 Items Style</a></li>
+ <li><a href="#Tabbar4Items">4 Items Style</a></li>
+ <li><a href="#Tabbar5Items">5 Items Style</a></li>
+ <li><a href="#TabbarText">Only Text Style</a></li>
+ <li><a href="#TabbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div data-role="page" id="TabbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+ <div data-role="page" id="Tabbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Tabbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="TabbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Icon Style List</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <!-- Toolbar Style -->
+ <div data-role="page" id="Toolbar">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
+ <li><a href="#Toolbar2Items">2 Items Style</a></li>
+ <li><a href="#Toolbar3Items">3 Items Style</a></li>
+ <li><a href="#Toolbar4Items">4 Items Style</a></li>
+ <li><a href="#Toolbar5Items">5 Items Style</a></li>
+ <li><a href="#ToolbarText">Only Text Style</a></li>
+ <li><a href="#ToolbarIcon">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarInHeader">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Test</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ </div>
+ </div>
+
+
+ <div data-role="page" id="Toolbar2Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">2 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar3Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">3 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar4Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">4 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="Toolbar5Items">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">5 Items Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarText">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Text Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" class="ui-btn-active">Songs</a></li>
+ <li><a href="#">Favorites</a></li>
+ <li><a href="#">Group</a></li>
+ <li><a href="#">Message</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+
+ <div data-role="page" id="ToolbarIcon">
+ <div data-role="header" data-position="fixed">
+ <h1>Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#">Only Icon Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="toolbar" >
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrlbar-save" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-share" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- Toolbar Style -->
+
+ <!-- Mixed Style -->
+
+ <div data-role="page" id="Mixed" >
+ <div data-role="header" data-position="fixed">
+ <h1>Mixed Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <p>Not Supported for winset</p>
+ </div>
+ </div>
+ <!-- Mixed Style -->
+
+ <!-- ControlBar Left Style -->
+ <div data-role="page" id="ControlBarVerticalLeft" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
+ <li><a href="#notImplemented">Button</a></li>
+ <li><a href="#notImplemented">Check</a></li>
+ </ul>
+ <div data-role="controlbar" data-style="left">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Left Style -->
+
+ <!-- ControlBar Right Style -->
+ <div data-role="page" id="ControlBarVerticalRight" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview" data-icon="1line-textonly">
+ <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li>
+ <li><a href="#notImplemented">Button</a></li>
+ </ul>
+ <div data-role="controlbar" data-style="right">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Right Style -->
+
+ <!-- ControlBar Animation -->
+ <div data-role="page" id="ControlBarAnimation" >
+ <div data-role="header" data-position="fixed">
+ <h1>Vertical Toolbar</h1>
+ </div>
+ <div data-role="content">
+ </div>
+ <div data-role="footer"data-position ="fixed">
+ <div data-role="controlbar" data-style="tabbar">
+ <ul>
+ <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+ <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+ <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+ </div>
+ <!-- ControlBar Animation -->
+
+ <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>ControlBar</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#normalstyle">Normal style title</a></li>
+ <li><a href="#extendedstyle">Extended style title</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="normalstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal1btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 1Btn</h1>
+ <a>text1</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 2Btn</h1>
+ <a>text1</a>
+ <a>text2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="normal2btnicononly">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title+2Buttons Icon only</h1>
+ <a data-icon="plus"></a>
+ <a data-icon="minus"></a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ <div data-role="page" id="normal3btn" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Title - 3Btn</h1>
+ <a>text1</a>
+ <a>text2</a>
+ <a>text3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="iconTitle">
+ <div data-role="header" data-position="fixed">
+ <img src="icon-tizen.png"/>
+ <h1>Icon Title</h1>
+ <a>text1</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle1">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Left button</h1>
+ <a class="ui-btn-left">Left1</a>
+ <a class="ui-btn-left">Left2</a>
+ <a class="ui-btn-left">Left3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle2">
+ <div data-role="header" data-position="fixed">
+ <h1>Title with Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ <a class="ui-btn-right">Right3</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div data-role="page" id="customTitle3">
+ <div data-role="header" data-position="fixed">
+ <a class="ui-btn-left">Left</a>
+ <h1>Title with Left/Right button</h1>
+ <a class="ui-btn-right">Right1</a>
+ <a class="ui-btn-right">Right2</a>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#normal1btn">Title 1 button</a></li>
+ <li><a href="#normal2btn">Title 2 button</a></li>
+ <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li>
+ <li><a href="#normal3btn">Title 3 button</a></li>
+ <li><a href="#iconTitle">Icon + Title</a></li>
+ <li><a href="#customTitle1">Custom Title with button position: left</a></li>
+ <li><a href="#customTitle2">Custom Title with button position: right</a></li>
+ <li><a href="#customTitle3">Custom Title with button position: mix</a></li>
+ <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+
+
+
+ <div data-role="page" id="extendedstyle" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ <li><a href="#extendedstyle4btn">4 Button</a></li>
+ <li><a href="#footerExtendedStyle">Footer Extended Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle2btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 2 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle3btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 3 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="extendedstyle4btn">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Title 4 Button </h1>
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" />
+ <label for="segment71">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" />
+ <label for="segment72">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" />
+ <label for="segment73">Message</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" />
+ <label for="segment74">Contact</label>
+ </fieldset>
+ </div>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li><a href="#extendedstyle2btn">2 Button</a></li>
+ <li><a href="#extendedstyle3btn">3 Button</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+
+ <div data-role="page" id="footerExtendedStyle">
+ <div data-role="header" data-position="fixed">
+ <h1>Extended Footer style</h1>
+ </div>
+ <div data-role="content">
+ <p> test page </p>
+ </div>
+ <div data-role="footer" data-position="fixed">
+ <div data-role="fieldcontain">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+ <label for="segment1">All</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+ <label for="segment2">Call</label>
+ <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+ <label for="segment3">Contact</label>
+ </fieldset>
+ </div>
+ <a>Edit</a>
+ </div>
+ </div>
+
+ <div data-role="page" id="multibuttonentry">
+ <div data-role="header" data-position="fixed">
+ <h1>Multi-button Entry</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="multibuttonentry" data-list-id="#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>
+ <div data-role="page" id="addressbook" data-footer-Exist="false" >
+ <div data-role="header" data-position="fixed">
+ <h1>Address Book</h1>
+ <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
+ </div>
+ <div data-role="content" id="contentList">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="#multibuttonentry">Adam Kinkaid</a></li>
+ <li><a href="#multibuttonentry">Alex Wickerham</a></li>
+ <li><a href="#multibuttonentry">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#multibuttonentry">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#multibuttonentry">Caleb Booth</a></li>
+ <li><a href="#multibuttonentry">Christopher Adams</a></li>
+ <li><a href="#multibuttonentry">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#multibuttonentry">David Walsh</a></li>
+ <li><a href="#multibuttonentry">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#multibuttonentry">Elizabeth Bacon</a></li>
+ <li><a href="#multibuttonentry">Emery Parker</a></li>
+ <li><a href="#multibuttonentry">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#multibuttonentry">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#multibuttonentry">Graham Smith</a></li>
+ <li><a href="#multibuttonentry">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#multibuttonentry">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#multibuttonentry">Mike Farnsworth</a></li>
+ <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#multibuttonentry">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#multibuttonentry">Paul Baker</a></li>
+ <li><a href="#multibuttonentry">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#multibuttonentry">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
+ </ul>
+ </div> <!--/content -->
+ </div> <!--/page -->
+
+ <!-- nocontents -->
+ <div data-role="page" id="no-contents-0" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents0" data-type="text">
+ <p>Text Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-1" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents1" data-type="picture">
+ <p>Picture Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-2" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents2" data-type="multimedia">
+ <p>Multimedia Type</p>
+ <p>Text</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+ <div data-role="page" id="no-contents-3" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>No Contents</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="nocontents" id="nocontents3">
+ <p>Unnamed Type</p>
+ </div>
+ </div> <!-- /content -->
+ </div> <!-- /page -->
+
+
+ <script src="widgets/checkbox/checkbox.js"></script>
+ <script src="widgets/switch/switch.js"></script>
+ <script src="widgets/radio/radio.js"></script>
+ <script src="widgets/progressbar.js"></script>
+ <script src="widgets/ctxpopup.js"></script>
+ <script src="widgets/popupwindow/popupwindow.js"></script>
+ <script src="tips/generate-elements-dynamically.js"></script>
+ <script src="tips/two-line-text/two-line-text.js"></script>
+ <script src="tips/list-sample/list-sample.js"></script>
+ <script src="tips/list-sample/expandable.js"></script>
+ <script src="widgets/pagecontrol/pagecontrol-demo.js"></script>
+ <script src="widgets/multibuttonentry-demo.js"></script>
+ <script src="widgets/pagelayout/barcontrol.js"></script>
+ <script src="widgets/pagelayout/backbutton-control.js"></script>
+ <!-- test file for content div control, not completed yet -->
+ <script src="widgets/pagelayout/ctrl-test.js"></script>
+</body>
+</html>