</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tizen Web UI</h1>
</div>
<li><a href="widgets/gallery.html">Gallery</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="widgets/selectioninfo.html">SelectionInfo</a></li>
<li><a href="#tokentextarea">Token Text Area</a></li>
<li data-role="list-divider">PageLayout</li>
</div>
</div>
-<div data-role="page" id="tabbar_persist_a">
+<div data-role="page" id="tabbar_persist_a" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar" data-id="persist_header" >
<ul>
<div data-role="content">
<p>page a</p>
</div>
+
+ <div data-role="footer">
+ </div>
</div>
-<div data-role="page" id="tabbar_persist_b">
+<div data-role="page" id="tabbar_persist_b" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar" data-id="persist_header" >
<ul>
<div data-role="content">
<p>page b</p>
</div>
+
+ <div data-role="footer">
+ </div>
</div>
-<div data-role="page" id="tabbar_persist_c">
+<div data-role="page" id="tabbar_persist_c" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar" data-id="persist_header" >
<ul>
<div data-role="content">
<p>page c</p>
</div>
+
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="notImplemented">
+ <div data-role="page" id="notImplemented" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Not Implemented</h1>
</div>
<div data-role="content">
<p> Not Implemented </p>
</div>
+ <div data-role="footer">
+ </div>
</div>
<div data-role="page" id="slider-demo" data-add-back-btn="true">
<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 data-role="footer">
+ </div>
</div> <!-- /page -->
- <div data-role="page" id="tokentextarea">
+ <div data-role="page" id="tokentextarea" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Token Text Area</h1>
</div>
<li><a id='MBTremoveAllItemTest'>Remove All Item</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<div data-role="page" id="addressbook" data-add-back-btn="none">
<div data-role="header" data-position="fixed">
--- /dev/null
+<!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 Web UI</h1>
+ </div>
+ <div data-role="content">
+ <p id="current_date"></p>
+ <p id="html_font_size"></p>
+
+ <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">
+ <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/toggleswitch.html">ToggleSwitch</a></li>
+ <li><a href="widgets/radio/radio.html">Radio</a></li>
+ <li><a href="widgets/searchbar/searchbar.html">Searchbar</a></li>
+ <li><a href="widgets/entry.html">Entry</a></li>
+ <li><a href="widgets/datefield.html">Time picker</a></li>
+ <li><a href="widgets/progressbar.html">Progressbar</a></li>
+ <li><a href="#slider-demo">Slider</a></li>
+ <li><a href="widgets/gallery.html">Gallery</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="widgets/selectioninfo.html">SelectionInfo</a></li>
+ <li><a href="#tokentextarea">Token Text Area</a></li>
+
+ <li data-role="list-divider">PageLayout</li>
+ <li><a href="widgets/naviframe/naviframe.html">Naviframe</a></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">Tabbar</li>
+ <li><a href="widgets/tabbar/tabbar.html">Tabbar</a></li>
+ <li><a href="#tabbar_persist_a">Persist toolbar</a></li>
+
+ <li data-role="list-divider">Scrollview</li>
+ <li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
+ <li><a href="widgets/scrollview_y.html">Vertical Scroll</a></li>
+ <li><a href="widgets/scrollview_xy.html">XY Scroll</a></li>
+ <li><a href="widgets/handler.html">Handler</a></li>
+ <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
+
+ <li data-role="list-divider">List</li>
+ <li><a href="widgets/list/list.html">List</a></li>
+ <li><a href="widgets/list/lists-autodividers.html">Autodividers</a></li>
+ <li><a href="widgets/fastscroll.html">Fastscroll</a></li>
+
+ <li data-role="list-divider">Additional 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/tickernoti-interval.html">TickerNoti Interval</a></li>
+ <li><a href="widgets/small-popup.html">Small Popup</a></li>
+ <li><a href="widgets/small-popup-interval.html">Small Popup Interval</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-size.html">Virtual Grid - Size</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">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/page-transition/transition.html">Page transitions</a></li>
+
+
+
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+ </div>
+
+<div data-role="page" id="tabbar_persist_a">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#tabbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
+ <li><a href="#tabbar_persist_b" >Save</a></li>
+ <li><a href="#tabbar_persist_c" >Next</a></li>
+ </ul>
+ </div><!-- /tabbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page a</p>
+ </div>
+</div>
+
+<div data-role="page" id="tabbar_persist_b">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#tabbar_persist_a" >Menu</a></li>
+ <li><a href="#tabbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
+ <li><a href="#tabbar_persist_c" >Next</a></li>
+ </ul>
+ </div><!-- /tabbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page b</p>
+ </div>
+</div>
+
+<div data-role="page" id="tabbar_persist_c">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#tabbar_persist_a" >Menu</a></li>
+ <li><a href="#tabbar_persist_b" >Save</a></li>
+ <li><a href="#tabbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
+ </ul>
+ </div><!-- /tabbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page c</p>
+ </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="tokentextarea">
+ <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>
+ <div data-role="page" id="addressbook" data-add-back-btn="none">
+ <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>
+ <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="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>
+
+ <link rel="stylesheet" href="./widgets/tabbar/tabbar.css" />
+</body>
+</html>
<p>A predefined Globalize culture file is loaded by the loader in Tizen Web UI Framework, according to the current language. If you want to load additional culture file, you can create each culture files, and let to choose one of them to load it by using $.tizen.util.loadCustomGlobalizeCulture() API.</p>
<hr>
</div>
+ <div data-role="footer">
+ </div>
<script src="custom-globalize-culture.js"></script>
</div>
</fieldset>
</article>
</div>
+ <div data-role="footer">
+ </div>
</div>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Single-Page Application </h1>
</div><!-- /header -->
<!DOCTYPE html>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>No Contents</h1>
+ <h1>Sample</h1>
</div>
<div data-role="content">
- <div data-role="nocontents" data-type="picture">
- <p>Picture Type</p>
- <p>Text</p>
+ <div data-role="gallery" data-vertical-align="middle">
+ <img src="../../widgets/test/05.jpg">
</div>
</div> <!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<li><a href="transition-page.html" data-transition="none">none</a></li>
</ul>
</div><!-- /content -->
+ <div data-role="footer" data-add-back-btn="true">
+ </div>
</div> <!-- /page -->
<li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</body>
<textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><input type="button" value="test button"/></textarea>
</div>
+ <div data-role="footer">
+ </div>
</div>
</body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Button grouping</h1>
<a href="index.html" data-role="button">Next</a>
</div>
</div><!-- /content -->
+
+ <div data-role="footer">
+ </div>
</div><!-- /page -->
</fieldset>
</div><!--/content-primary -->
</div>
-
-
-
+ <div data-role="footer">
+ </div>
</body>
</html>
+++ /dev/null
-<html>\r
-<body>\r
- <div data-role="page" id="colorwidgets-demo" data-add-back-btn="true">\r
- <div data-role="header" data-position="fixed">\r
- <h1>Color widgets</h1>\r
- </div>\r
- <div data-role="content">\r
- <div style="padding-right: 20px;">\r
- <div>\r
- <div>Color title widget</div>\r
- <div data-role="colortitle" id="colortitle"></div>\r
- </div>\r
- <div>\r
- <div>Color palette widget</div>\r
- <div data-role="colorpalette" id="colorpalette" data-show-preview="true"></div>\r
- </div>\r
- <div> \r
- <div>Color picker button</div>\r
- <div data-role="colorpickerbutton" data-inline="true" id="colorpickerbutton-noform"></div>\r
- </div>\r
- <div>\r
- <div>Color picker button (form element)</div>\r
- <form action="#" method="get">\r
- <div role="fieldcontain">\r
- <label for="colorpickerbutton" class="colorpickerbutton_label">Pick Colour:</label> \r
- <input type="color" data-inline="true" id="colorpickerbutton" value="#dfddc3"></input>\r
- </div>\r
- </form>\r
- </div>\r
- <div>\r
- <form action="#" method="get">\r
- <div role="fieldcontain">\r
- <input type="checkbox" id="checkHideInput" checked></input> \r
- <label for="checkHideInput">Hide Input</label>\r
- </div>\r
- </form>\r
- </div>\r
- </div>\r
- <div>\r
- <div data-role="label">Hue-Saturation-Value picker widget</div>\r
- <div data-role="hsvpicker" id="hsvpicker"></div>\r
- </div>\r
- <div>\r
- <div data-role="label">Hue-Saturation-Lightness picker widget</div>\r
- <div data-role="colorpicker" id="colorpicker"></div>\r
- </div>\r
- </div>\r
- <!-- /content -->\r
- <div data-role="footer"></div>\r
- </div>\r
- <!-- /page -->\r
-</body>\r
-</html>\r
</ul>
</div>
</div>
-</div> <!-- /page -->
\ No newline at end of file
+</div> <!-- /page -->
</li>
</ul>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<input type="color" name="color" id="color" value="black" />
</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div><!-- /page -->
</html>
<li>Orlando</li>
</ul>
</div><!-- content -->
+ <div data-role="footer">
+ </div>
</div><!-- page -->
-
-
+++ /dev/null
-<!DOCTYPE html>
- <div data-role="page" class="type-interior">
-
- <div data-role="header" >
- <h1>Font - TODO : Add more samples</h1>
- <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
- </div><!-- /header -->
-
- <div data-role="content">
- <div class="content-primary">
- <span><strong>bold</strong></span>
- <br><span>normal</span>
- <br><span><em>italic</em></span>
-
-</div><!-- /content -->
-</div><!-- /page -->
-
+++ /dev/null
-<!DOCTYPE html>
- <div data-role="page" class="type-interior">
-
- <div data-role="header" data-position="fixed">
- <h1>Forms</h1>
- </div><!-- /header -->
-
- <div data-role="content">
- <div class="content-primary">
-
- <form action="#" method="get">
-
- <h2>Native form elements & buttons</h2>
-
- <p>Although the framework automatically enhances form elements and buttons into <a href="forms-all.html">touch input optimized controls</a> to streamline development, it's easy to tell jQuery Mobile to leave these elements alone so the standard, native control can be used instead.</p>
- <p>Adding the <code>data-role="none"</code> attribute to any form or button element tells the framework to not apply any enhanced styles or scripting. The examples below all have this attribute in place to demonstrate the effect. You may need to write custom styles to lay out your form controls because we try to leave all the default styling intact.</p>
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="none">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1" data-role="none">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3" data-role="none">
- <option>Choose...</option>
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
-
-
-
- <p><strong>Button</strong> based button:</p>
- <button data-role="none">Button element</button>
-
- <p><strong>Input type="button"</strong> based button:</p>
- <input type="button" value="Input type=button" data-role="none" />
-
- <p><strong>Input type="submit"</strong> based button:</p>
- <input type="submit" value="Input type=submit" data-role="none" />
-
- <p><strong>Input type="reset"</strong> based button:</p>
- <input type="reset" value="Input type=reset" data-role="none" />
-
- <p><strong>Input type="image"</strong> based button:</p>
- <input type="image" src="../_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />
-
- </form>
-
- </div><!--/content-primary -->
-
-</div><!-- /content -->
-
-</div><!-- /page -->
-
-
+++ /dev/null
-<!DOCTYPE html>
- <div data-role="page" class="type-interior">
-
- <div data-role="header" >
- <h1>Forms</h1>
- <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
- </div><!-- /header -->
-
- <div data-role="content">
- <div class="content-primary">
-
- <form action="#" method="get">
-
- <h2>Form elements</h2>
-
- <p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. </p>
-
- <p>Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.</p>
-
- <div data-role="fieldcontain">
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="textarea">Textarea:</label>
- <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
- </div>
-
- <div data-role="fieldcontain">
- <label for="password">Password:</label>
- <input type="password" name="password" id="password" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="number">Number:</label>
- <input type="number" name="number" id="number" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="email">Email:</label>
- <input type="email" name="email" id="email" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="url">Url:</label>
- <input type="url" name="url" id="url" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="tel">Tel:</label>
- <input type="tel" name="tel" id="tel" value="" />
- </div>
-
-
- <div data-role="fieldcontain">
- <label for="search">Search Input:</label>
- <input type="search" name="password" id="search" value="" />
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider2">Flip switch:</label>
- <select name="slider2" id="slider2" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose as many snacks as you'd like:</legend>
- <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
- <label for="checkbox-1a">Cheetos</label>
-
- <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
- <label for="checkbox-2a">Doritos</label>
-
- <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
- <label for="checkbox-3a">Fritos</label>
-
- <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
- <label for="checkbox-4a">Sun Chips</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Font styling:</legend>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
- <label for="checkbox-6">b</label>
-
- <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
- <label for="checkbox-7"><em>i</em></label>
-
- <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
- <label for="checkbox-8">u</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-type="horizontal">
- <legend>Layout view:</legend>
- <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
- <label for="radio-choice-c">List</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
- <label for="radio-choice-d">Grid</label>
- <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
- <label for="radio-choice-e">Gallery</label>
- </fieldset>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Choose shipping method:</label>
- <select name="select-choice-1" id="select-choice-1">
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-3" class="select">Your state:</label>
- <select name="select-choice-3" id="select-choice-3">
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
- </div>
-
- <div data-role="fieldcontain">
- <label for="select-choice-a" class="select">Choose shipping method:</label>
- <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
- <option>Custom menu example</option>
- <option value="standard">Standard: 7 day</option>
- <option value="rush">Rush: 3 days</option>
- <option value="express">Express: next day</option>
- <option value="overnight">Overnight</option>
- </select>
- </div>
-
- <div class="ui-body ui-body-b">
- <fieldset class="ui-grid-a">
- <div class="ui-block-a"><button type="submit">Cancel</button></div>
- <div class="ui-block-b"><button type="submit" >Submit</button></div>
- </fieldset>
- </div>
- </form>
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="c" data-dividertheme="d">
-
- <li data-role="list-divider">Form elements</li>
- <li><a href="docs-forms.html">Form basics</a></li>
- <li data-theme="a"><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
-
- </ul>
- </div>
- </div>
-
-</div><!-- /content -->
-
-<div data-role="footer" class="footer-docs" data-theme="c">
- <p>© 2011 The jQuery Project</p>
-</div>
-
-</div><!-- /page -->
-
-<div id="virtualgrid_list_page" data-role="page" class="virtualgrid_list_demo_page">\r
- <div id="normal" data-role="header" data-position="fixed">\r
- <h1>Virtual Grid - List</h1>\r
- </div>\r
- <div data-role="content" data-scroll="none">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-rotation-list-namecard" >\r
- <div class="ui-demo-namecard-list-pic">\r
- <img class="ui-demo-namecard-list-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-list-contents">\r
- <span class="ui-li-text-main">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-role="virtualgrid" data-rotation="false" data-template="tizen-demo-namecard"></div>\r
- </div>\r
- <script>\r
- $( ".virtualgrid_list_demo_page" ).one( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
- $( ".virtualgrid_demo_page" ).die();\r
-\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
- itemData: function ( idx ) {\r
- return JSON_DATA[ idx ];\r
- },\r
- numItemData: JSON_DATA.length,\r
- cacheItemData: function ( minIdx, maxIdx ) {\r
- }\r
- });\r
-\r
- $( ".virtualgrid_list_demo_page" ).unbind("pagecreate");\r
- });\r
- });\r
- </script>\r
-</div>\r
+<div id="virtualgrid_list_page" data-role="page" class="virtualgrid_list_demo_page" data-add-back-btn="true">
+ <div id="normal" data-role="header" data-position="fixed">
+ <h1>Virtual Grid - List</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-rotation-list-namecard" >
+ <div class="ui-demo-namecard-list-pic">
+ <img class="ui-demo-namecard-list-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-list-contents">
+ <span class="ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-rotation="false" data-template="tizen-demo-namecard"></div>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script>
+ $( ".virtualgrid_list_demo_page" ).one( "pagecreate", function() {
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $( ".virtualgrid_demo_page" ).die();
+
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) {
+ }
+ });
+
+ $( ".virtualgrid_list_demo_page" ).unbind("pagecreate");
+ });
+ });
+ </script>
+</div>
-<div id="virtualgrid_rotation_page" data-role="page" class="virtualgrid_rotation_demo_page">\r
- <div id="normal" data-role="header" data-position="fixed">\r
- <h1>Virtual Grid - Rotation</h1>\r
- </div>\r
- <div data-role="content" data-scroll="none">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-rotation-namecard">\r
- <div class="ui-demo-namecard-pic">\r
- <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-contents">\r
- <span class="name ui-li-text-main">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard">\r
- </div>\r
- </div>\r
- <script>\r
- $( ".virtualgrid_rotation_demo_page" ).one( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
- $( ".virtualgrid_demo_page" ).die();\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
- itemData: function ( idx ) {\r
- return JSON_DATA[ idx ];\r
- },\r
- numItemData: JSON_DATA.length,\r
- cacheItemData: function ( minIdx, maxIdx ) {\r
- }\r
- });\r
- $( ".virtualgrid_rotation_demo_page" ).unbind("pagecreate");\r
- });\r
- });\r
- </script>\r
-</div>\r
+<div id="virtualgrid_rotation_page" data-role="page" class="virtualgrid_rotation_demo_page" data-add-back-btn="true">
+ <div id="normal" data-role="header" data-position="fixed">
+ <h1>Virtual Grid - Rotation</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-rotation-namecard">
+ <div class="ui-demo-namecard-pic">
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-contents">
+ <span class="name ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-rotation="true" data-template="tizen-demo-namecard">
+ </div>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script>
+ $( ".virtualgrid_rotation_demo_page" ).one( "pagecreate", function() {
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $( ".virtualgrid_demo_page" ).die();
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) {
+ }
+ });
+ $( ".virtualgrid_rotation_demo_page" ).unbind("pagecreate");
+ });
+ });
+ </script>
+</div>
-<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_test_demo_page">\r
- <div data-role="header" data-position="fixed">\r
- <h1>Virtual Grid - Size</h1>\r
- </div>\r
- <div data-role="content" data-scroll="none">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-rotation-namecard">\r
- <div class="ui-demo-namecard-pic">\r
- <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-contents">\r
- <span class="name ui-li-text-main">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-role="virtualgrid" data-direction="y" data-rotation="false" data-template="tizen-demo-namecard" style="width:400px; height:400px;">\r
- </div>\r
- </div>\r
- <script>\r
- $( ".virtualgrid_test_demo_page" ).one( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
- itemData: function ( idx ) {\r
- return JSON_DATA[ idx ];\r
- },\r
- numItemData: JSON_DATA.length,\r
- cacheItemData: function ( minIdx, maxIdx ) {\r
- }\r
- });\r
- });\r
- });\r
- </script>\r
-</div>\r
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_test_demo_page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Virtual Grid - Size</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-rotation-namecard">
+ <div class="ui-demo-namecard-pic">
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-contents">
+ <span class="name ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-direction="y" data-rotation="false" data-template="tizen-demo-namecard" style="width:400px; height:400px;">
+ </div>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script>
+ $( ".virtualgrid_test_demo_page" ).one( "pagecreate", function() {
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) {
+ }
+ });
+ });
+ });
+ </script>
+</div>
-<div id="virtualgrid_x_page" data-role="page" class="virtualgrid_x_demo_page">\r
- <div id="normal" data-role="header" data-position="fixed">\r
- <h1>Virtual Grid - X</h1>\r
- </div>\r
- <div data-role="content" data-scroll="none">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-rotation-x-namecard">\r
- <div class="ui-demo-namecard-pic">\r
- <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-contents-x">\r
- <span class="name ui-li-text-main ui-demo-namecard-span-x">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-direction="x" data-role="virtualgrid" data-template="tizen-demo-namecard">\r
- </div>\r
- </div>\r
- <script>\r
- $("#virtualgrid-demo").bind("select", function(event, data){\r
- //alert("item :: " + $(data).find(".ui-demo-namecard-contents").text());\r
- });\r
- </script>\r
- <script>\r
- $( ".virtualgrid_x_demo_page" ).one( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {\r
- $( ".virtualgrid_demo_page" ).die();\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
- itemData: function ( idx ) {\r
- return JSON_DATA[ idx ];\r
- },\r
- numItemData: JSON_DATA.length,\r
- cacheItemData: function ( minIdx, maxIdx ) {\r
- }\r
- });\r
- $( ".virtualgrid_x_demo_page" ).unbind("pagecreate");\r
- });\r
- });\r
- </script>\r
-</div>\r
+<div id="virtualgrid_x_page" data-role="page" class="virtualgrid_x_demo_page" data-add-back-btn="true">
+ <div id="normal" data-role="header" data-position="fixed">
+ <h1>Virtual Grid - X</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-rotation-x-namecard">
+ <div class="ui-demo-namecard-pic">
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-contents-x">
+ <span class="name ui-li-text-main ui-demo-namecard-span-x">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-direction="x" data-role="virtualgrid" data-template="tizen-demo-namecard">
+ </div>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script>
+ $("#virtualgrid-demo").bind("select", function(event, data){
+ //alert("item :: " + $(data).find(".ui-demo-namecard-contents").text());
+ });
+ </script>
+ <script>
+ $( ".virtualgrid_x_demo_page" ).one( "pagecreate", function() {
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $( ".virtualgrid_demo_page" ).die();
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) {
+ }
+ });
+ $( ".virtualgrid_x_demo_page" ).unbind("pagecreate");
+ });
+ });
+ </script>
+</div>
-<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo_page">\r
- <div id="normal" data-role="header" data-position="fixed">\r
- <h1>Virtual Grid</h1>\r
- </div>\r
- <div data-role="content" data-scroll="none">\r
- <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">\r
- <div class="ui-demo-rotation-namecard">\r
- <div class="ui-demo-namecard-pic">\r
- <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />\r
- </div>\r
- <div class="ui-demo-namecard-contents">\r
- <span class="name ui-li-text-main">${NAME}</span>\r
- </div>\r
- </div>\r
- </script>\r
- <div id="virtualgrid-demo" data-role="virtualgrid" sdata-rotation="false" data-template="tizen-demo-namecard">\r
- </div>\r
- </div>\r
- <script>\r
- $( ".virtualgrid_grid_demo_page" ).one( "pagecreate", function() {\r
- $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus, jqXHR ) {\r
- $( ".virtualgrid_demo_page" ).die();\r
-\r
- $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {\r
- itemData: function ( idx ) {\r
- return JSON_DATA[ idx ];\r
- },\r
- numItemData: JSON_DATA.length,\r
- cacheItemData: function ( minIdx, maxIdx ) {\r
- }\r
- });\r
- $( ".virtualgrid_grid_demo_page" ).unbind("pagecreate");\r
- });\r
- });\r
- </script>\r
-</div>\r
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo_page" data-add-back-btn="true">
+ <div id="normal" data-role="header" data-position="fixed">
+ <h1>Virtual Grid</h1>
+ </div>
+ <div data-role="content" data-scroll="none">
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-rotation-namecard">
+ <div class="ui-demo-namecard-pic">
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-contents">
+ <span class="name ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-role="virtualgrid" sdata-rotation="false" data-template="tizen-demo-namecard">
+ </div>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script>
+ $( ".virtualgrid_grid_demo_page" ).one( "pagecreate", function() {
+ $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus, jqXHR ) {
+ $( ".virtualgrid_demo_page" ).die();
+
+ $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
+ itemData: function ( idx ) {
+ return JSON_DATA[ idx ];
+ },
+ numItemData: JSON_DATA.length,
+ cacheItemData: function ( minIdx, maxIdx ) {
+ }
+ });
+ $( ".virtualgrid_grid_demo_page" ).unbind("pagecreate");
+ });
+ });
+ </script>
+</div>
-<!DOCTYPE html>\r
-<div data-role="page">\r
- <div data-role="header" data-position="fixed">\r
- <h1>Handler Test</h1>\r
- </div><!-- /header -->\r
- <div data-role="content" data-scroll="y" data-handler="true">\r
- <ul data-role="listview">\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- <li data-role="list-divider">A</li>\r
- <li><a href="#">Adam Kinkaid</a></li>\r
- <li><a href="#">Alex Wickerham</a></li>\r
- <li><a href="#">Avery Johnson</a></li>\r
- <li data-role="list-divider">B</li>\r
- <li><a href="#">Bob Cabot</a></li>\r
- <li data-role="list-divider">C</li>\r
- <li><a href="#">Caleb Booth</a></li>\r
- <li><a href="#">Christopher Adams</a></li>\r
- <li><a href="#">Culver James</a></li>\r
- <li data-role="list-divider">D</li>\r
- <li><a href="#">David Walsh</a></li>\r
- <li><a href="#">Drake Alfred</a></li>\r
- <li data-role="list-divider">E</li>\r
- <li><a href="#">Elizabeth Bacon</a></li>\r
- <li><a href="#">Emery Parker</a></li>\r
- <li><a href="#">Enid Voldon</a></li>\r
- <li data-role="list-divider">F</li>\r
- <li><a href="#">Francis Wall</a></li>\r
- <li data-role="list-divider">G</li>\r
- <li><a href="#">Graham Smith</a></li>\r
- <li><a href="#">Greta Peete</a></li>\r
- <li data-role="list-divider">H</li>\r
- <li><a href="#">Harvey Walls</a></li>\r
- <li data-role="list-divider">M</li>\r
- <li><a href="#">Mike Farnsworth</a></li>\r
- <li><a href="#">Murray Vanderbuilt</a></li>\r
- <li data-role="list-divider">N</li>\r
- <li><a href="#">Nathan Williams</a></li>\r
- <li data-role="list-divider">P</li>\r
- <li><a href="#">Paul Baker</a></li>\r
- <li><a href="#">Pete Mason</a></li>\r
- <li data-role="list-divider">R</li>\r
- <li><a href="#">Rod Tarker</a></li>\r
- <li data-role="list-divider">S</li>\r
- <li><a href="#">Sawyer Wakefield</a></li>\r
- </ul>\r
- </div><!-- /content -->\r
-</div><!-- /page -->
\ No newline at end of file
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Handler Test</h1>
+ </div><!-- /header -->
+ <div data-role="content" data-scroll="y" data-handler="true">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#">Mike Farnsworth</a></li>
+ <li><a href="#">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#">Paul Baker</a></li>
+ <li><a href="#">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#">Sawyer Wakefield</a></li>
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#">Mike Farnsworth</a></li>
+ <li><a href="#">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#">Paul Baker</a></li>
+ <li><a href="#">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#">Sawyer Wakefield</a></li>
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#">Mike Farnsworth</a></li>
+ <li><a href="#">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#">Paul Baker</a></li>
+ <li><a href="#">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#">Sawyer Wakefield</a></li>
+ </ul>
+ </div><!-- /content -->
+ <div data-role="footer">
+ </div>
+</div><!-- /page -->
<li class="ui-li-bubble-receive"><p>Picture test</p><img src="list-bubble-sample1.png" /><span class="ui-li-bubble-time">9:40 PM</span></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
-<div data-role="page" id="genlist-dialog-edit">
+<div data-role="page" id="genlist-dialog-edit" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Dialogue lists - edit mode</h1>
</div>
</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li class="ui-li-has-checkbox">Normal lists</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li class="ui-li-has-checkbox">Normal lists</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li><a href="#" >Normal lists</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li class="ui-li-dialogue">Normal lists</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li><a href="#">Normal lists</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</div>
+<div data-role="footer">
+</div>
+
</div>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</form>
</div>
+ <div data-role="footer">
+ </div>
</div>
</div>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li><a href="list-email.html">Email list</a></li>
<li><a href="list-swipe.html">Swipe list</a></li>
<li><a href="list-extendable.html">Extendable list</a></li>
+ <li data-role="list-divider">Virtual List</li>
<li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
<li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
<li><a href="virtuallist-normal_3_1_6.html">Virtual List Normal Style 1line-toggle</a></li>
<li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
<li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
- <li data-role="list-divider">(empty)</li>
- <li data-role="list-divider">Samples</li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<ul-data-role="listview">
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" >
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Autodividers</h1>
<ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<ul id="virtuallist-normal_1line-bigicon5_ul" data-role="virtuallistview" data-template="tmp-1line-bigicon5" data-dbtable="JSON_DATA" data-row="100">
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-dbtable="JSON_DATA" data-row="100">
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<ul id="virtuallist-normal_1line-toggle_ul" data-role="virtuallistview" data-template="tmp-1line-toggle" data-dbtable="JSON_DATA" data-row="100">
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<ul id="virtuallist-normal_2line-star1_ul" data-role="virtuallistview" data-template="tmp-2line-star1" data-dbtable="JSON_DATA" data-row="100">
</ul>
</div>
+ <div data-role="footer" data-add-back-btn="true">
+ </div>
</div>
<!DOCTYPE html>
- <div data-role="page" data-add-back-btn="true" id="listviewcontrols-demo" data-add-back-btn="true">
+ <div data-role="page" data-add-back-btn="true" id="listviewcontrols-demo">
<div data-role="header">
<h1>Listview controls</h1>
<fieldset data-role="controlgroup">
<li><a href="multimediaview_audio.html">AUDIO</a></li>
</ul>
</div>
-</div>
\ No newline at end of file
+ <div data-role="footer">
+ </div>
+</div>
<p>Your browser does not support the audio tag.</p>
</audio>
</div>
+ <div data-role="footer">
+ </div>
</div>
<p>Your browser does not support the video tag.</p>
</video>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</div>
</div>
+ <div data-role="footer">
+ </div>
</div>
<div data-role="page" id="normalstyle" data-add-back-btn="true">
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="normal1btn">
+ <div data-role="page" id="normal1btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Normal Title - 1Btn</h1>
<a>text1</a>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="normal2btn">
+ <div data-role="page" id="normal2btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Normal Title - 2Btn</h1>
<a>text1</a>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="normal2btnicononly">
+ <div data-role="page" id="normal2btnicononly" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Normal Title+2Buttons Icon only</h1>
<a data-icon="plus"></a>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="iconTitle">
+ <div data-role="page" id="iconTitle" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
<h1>Icon Title</h1>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="customTitle1">
+ <div data-role="page" id="customTitle1" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title with Left button</h1>
<a class="ui-btn-left">Left1</a>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="customTitle2">
+ <div data-role="page" id="customTitle2" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title with Right button</h1>
<a class="ui-btn-right">Right1</a>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="customTitle3">
+ <div data-role="page" id="customTitle3" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<a class="ui-btn-left">Left</a>
<h1>Title with Left/Right button</h1>
<li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</ul>
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="extendedstyle2btn">
+ <div data-role="page" id="extendedstyle2btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Extended Title 2 Button </h1>
<div data-role="fieldcontain">
</ul>
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="extendedstyle3btn">
+ <div data-role="page" id="extendedstyle3btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Extended Title 3 Button </h1>
<div data-role="fieldcontain">
</ul>
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="extendedstyle4btn">
+ <div data-role="page" id="extendedstyle4btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Extended Title 4 Button </h1>
<div data-role="fieldcontain">
</ul>
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div>
- <div data-role="page" id="footerExtendedStyle">
+ <div data-role="page" id="footerExtendedStyle" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Extended Footer style</h1>
</div>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Footer more</h1>
</div>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Footer more</h1>
</div>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title Text</h1>
</div>
<div data-role="content">
<p>title text sample</p>
</div>
+ <div data-role="footer">
+ </div>
</div>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title text Button 01</h1>
<a data-icon="naviframe-plus"></a>
<p>Title text Button 01 sample</p>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title text Button 02</h1>
<a data-icon="naviframe-edit"></a>
<p>Title text Button 02 sample</p>
</ul>
</div>
+ <div data-role="footer">
+ </div>
</div>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title Text multiline</h1>
<span class="ui-title-text-sub">tizen@samsung.com</span>
<div data-role="content">
<p>Title text Multiline sample</p>
</div>
+ <div data-role="footer">
+ </div>
</div>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
<h1>Image Title Text multiline</h1>
<div data-role="content">
<p>Image Title text Multiline sample</p>
</div>
+ <div data-role="footer">
+ </div>
</div>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
<h1>Image Title Text multiline Button 02</h1>
<div data-role="content">
<p>Image Title text Multiline Button 02 sample</p>
</div>
+ <div data-role="footer">
+ </div>
</div>
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
<h1>Image Title Text multiline</h1>
<div data-role="content">
<p>Image Title text Multiline sample</p>
</div>
+ <div data-role="footer">
+ </div>
</div>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
- <meta name="viewport" content="width=720, initial-scale=1">
- <title>jQM Test Example</title>
-
- <script src="../../../src/jqm/js/jquery.js"></script>
- <script src="../../../src/jqm/js/"></script>
- <script src="../../../src/jqm/theme.js"></script>
- <link rel="stylesheet" href="../../../build/tizen-web-ui-fw/0.1/themes/nbeat-black/tizen-web-ui-fw-theme.css" />
- </head>
-<body>
-
-<div data-role="page" 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</a></li>
- <li><a href="#expendedstyle">Expended</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>Title Area</h1>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <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="#normal3btn">Title 3 button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="normal1btn">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Title Area</h1>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <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="#normal3btn">Title 3 button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="normal2btn">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Title Area</h1>
- <a>Text2</a>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <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="#normal3btn">Title 3 button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="normal3btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <a>Text1</a>
- <h1>Title Area</h1>
- <a>Text2</a>
- <a>Text3</a>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <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="#normal3btn">Title 3 button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="expendedstyle" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Title Extend</h1>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#expendedstyle2btn">2 Button</a></li>
- <li><a href="#expendedstyle3btn">3 Button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="expendedstyle2btn">
- <div data-role="header" data-position="fixed">
- <a>Text</a>
- <h1>Title Extend 2 Button </h1>
- <a>Text</a>
- <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 data-role="button" data-inline="true">Text</div>-->
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#expendedstyle2btn">2 Button</a></li>
- <li><a href="#expendedstyle3btn">3 Button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
-
-<div data-role="page" id="expendedstyle3btn">
- <div data-role="header" data-position="fixed">
- <a>Text</a>
- <h1>Title Extend 3 Button </h1>
- <a>Text</a>
- <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 data-role="button" data-inline="true">Text</div>-->
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#expendedstyle2btn">2 Button</a></li>
- <li><a href="#expendedstyle3btn">3 Button</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <li><a href="#">Test</a></li>
- <div data-role="button" data-inline="true">Text Button TesT</div>
- </ul>
- </div><!--/content-primary -->
- </div>
-</div>
\ No newline at end of file
</head>
<body>
- <div data-role="page" id="backButtonDemomain">
+ <div data-role="page" id="backButtonDemomain" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Footer and Backbutton demopage</h1>
</div>
<li><a href="backbutton/dynamically-attatch-backbutton-to-footer.html">5. Dynamically attatch backbutton to footer</a></li>
<li><a href="backbutton/dynamically-attatch-backbutton-to-header.html">6. Dynamically attatch backbutton to header</a></li>
</div>
+ <div data-role="footer">
+ </div>
</div>
<script src="backbutton-control.js"></script>
</body>
</head>
<body>
-<div data-role="page" id="pageUpdateDemo">
+<div data-role="page" id="pageUpdateDemo" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Update page </h1>
</div>
<div data-role="button" id="hidefooter" data-inline="true">Hide footer</div>
<div data-role="button" id="showfooter" data-inline="true">Show footer</div>
</div>
+ <div data-role="footer">
+ </div>
</div>
</body>
</html>
<body>
- <div data-role="page" id="page1">
+ <div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tizen UI</h1>
</div>
<li><a href="#center_liststyle_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 1 button popup</a></li>
<li><a href="#center_liststyle_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 2 button popup</a></li>
<li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 3 button popup</a></li>
- <li><a href="#positionWindow" data-rel="popup" data-position-to="window">Position</li>
+ <li><a href="#positionWindow" data-rel="popup" data-position-to="window">Position</a></li>
</ul>
<!-- Social Magazine font popup -->
<div class="ui-popup-title">
<h1>Font Size</h1>
</div>
- <div class="ui-popup-scroller-bg" data-scroll="y" style="height:auto">
- <ul data-role="listview">
- <li class="ui-li-has-radio" id="text_fontSmall">
- <a href="#">
- <input type="radio" name="radio-choice-1" id="fontSmall" value="choice-1"/>
- text_Small</a>
- </li>
- <li class="ui-li-has-radio" id="text_fontMedium">
- <a href="#">
- <input type="radio" name="radio-choice-1" id="fontMedium" value="choice-2"/>
- text_Medium</a>
- </li>
- <li class="ui-li-has-radio" id="text_fontLarge">
- <a href="#">
- <input type="radio" name="radio-choice-1" id="fontLarge" value="choice-3"/>
- text_Large</a>
- </li>
- </ul>
- </div>
- <div class="ui-popup-button-bg">
- <div data-role="button" data-inline="true">OK</div>
- <div data-role="button" data-inline="true">Cancel</div>
- </div>
+ <div class="ui-popup-scroller-bg" data-scroll="y" style="height:auto">
+ <ul data-role="listview">
+ <li class="ui-li-has-radio" id="text_fontSmall">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontSmall" value="choice-1"/>
+ text_Small</a>
+ </li>
+ <li class="ui-li-has-radio" id="text_fontMedium">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontMedium" value="choice-2"/>
+ text_Medium</a>
+ </li>
+ <li class="ui-li-has-radio" id="text_fontLarge">
+ <a href="#">
+ <input type="radio" name="radio-choice-1" id="fontLarge" value="choice-3"/>
+ text_Large</a>
+ </li>
+ </ul>
+ </div>
+ <div class="ui-popup-button-bg">
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ </div>
</div>
<!-- Social Magazine ime popup -->
</div> <!-- /content -->
+ <div data-role="footer">
+ </div>
+
</div> <!-- /page -->
</body>
</li>
</ul>
</div> <!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div> <!-- page -->
<!DOCTYPE html>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Scroll Jump</h1>
</div>
<li>item29</li>
</ul>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<!DOCTYPE html>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Scrollview</h1>
</div>
</div>
<p>Horizontal Scroll #2: set the width of view</p>
<div data-scroll="x">
- <div class="ui-scrollview-view" style="width:1176px">
+ <div class="ui-scrollview-view" style="width:1185px">
<img src="./test/01.jpg" height="70px">
<img src="./test/02.jpg" height="70px">
<img src="./test/03.jpg" height="70px">
</div>
</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<!DOCTYPE html>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Scrollview</h1>
</div>
</div>
</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<!DOCTYPE html>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Scrollview</h1>
</div>
<img src="./test/11.jpg" width="95%">
</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<!DOCTYPE html>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position ="fixed" >
<h1>Searchbar list</h1>
</div><!-- /header -->
<li><a href="searchbar_button.html">2. Type 2 (button)</a></li>
<li><a href="searchbar_cancel.html">3. Type 3 (cancel btn)</a></li>
</ul>
+ </div>
+
+ <div data-role="footer">
+ </div>
</div><!-- /page -->
<p>Edelin</p>
<p>Gay</p>
</div>
+ <div data-role="footer">
+ </div>
<script src="searchbar.js"></script>
</div><!-- /page -->
<p>Edelin</p>
<p>Gay</p>
</div>
+ <div data-role="footer">
+ </div>
<script src="searchbar.js"></script>
</div><!-- /page -->
<p>Edelin</p>
<p>Gay</p>
</div>
+ <div data-role="footer">
+ </div>
<script src="searchbar.js"></script>
</div><!-- /page -->
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Segment Control</h1>
<div id=test> </div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div><!-- /page -->
+++ /dev/null
-<div data-role="page"data-add-back-btn="true" data-fit-page-to-window="true">
- <div data-role="notification" id="smallpopup_selectioninfo" data-type="popup">
- </div>
- <div data-role="header" data-position="fixed">
- <h1>Selection Info</h1>
- </div>
-
- <div data-role="content">
- <h2>Selectioninfo Test </h2>
- <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">
- <legend>Choose some days</legend>
- </fieldset>
-
- <div><a id="day-selector-check-all" data-role="button" data-inline="true">Check all</a></div>
- <hr/>
-
- <p id="selectioninfo-demo" align="center">Click Here to Show Small Popup</p>
-</div> <!-- /page -->
<div data-role="content">
<div data-role="button" id="noti-demo">Show Smallpopup</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<div data-role="content">
<div data-role="button" id="noti-demo">Show Smallpopup</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
-<div data-role="page" id="switch-demo">
+<div data-role="page" id="switch-demo" data-add-back-btn="true">
<div data-role="header">
<h1>ToggleSwitch</h1>
</div>
</div> <!-- /content -->
<div data-role="footer">
- <h4>Web UI Framework - Widgets gallery</h4>
</div>
</div> <!-- page -->
</head>
<body>
- <div data-role="page">
+ <div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar Demo</h1>
</div>
</ul>
</div><!--/content-primary -->
</div>
+ <div data-role="footer">
+ </div>
</div>
</body>
</html>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
</div>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
</div>
</head>
<body>
-<div data-role="page" data-add-back-btn=true>
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
</div>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
</div>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
</div>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar icon with title</h1>
<div data-role="tabbar">
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
</head>
<body>
-<div data-role="page">
+<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Tabbar text with title</h1>
<div data-role="tabbar">
<div data-role="content">
</div>
+
+ <div data-role="footer">
+ </div>
</div>
</body>
<div data-role="content">
<div data-role="button" id="noti-demo">Show TickerNoti</div>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->
<div data-role="button" id="noti-icon1" data-inline="true">Change Icon - Phone</div>
<div data-role="button" id="noti-icon2" data-inline="true">Change Icon - Message</div><br>
</div><!-- /content -->
+ <div data-role="footer">
+ </div>
</div> <!-- /page -->