--- /dev/null
+Koeun Choi <koeun.choi at samsung dot com>
--- /dev/null
+Copyright (c) Samsung Electronics Co., Ltd. All rights reserved.
+Except as noted, this software is licensed under Flora License, Version 1.
+Please, see the LICENSE file for Flora License terms and conditions.
+
<?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://www.samsung.com/app/Winset" version="0.1.0" viewmodes="windowed">
- <access origin="*" subdomains="false"/>
- <tizen:application id="samplewins" required_version="1.0"/>
- <feature name="http://tizen.org/privilege/tizen" required="true"/>
- <feature name="http://tizen.org/privilege/application.read" required="true"/>
- <icon src="icon.png"/>
- <name>TizenWinset</name>
- <tizen:setting screen-orientation="portrait" context-menu="enable" background-support="enable" encryption="disable" nodisplay="false"/>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://www.samsung.com/app/Winset" version="0.1.0" viewmodes="maximized">
+ <access origin="*" subdomains="false"/>
+ <tizen:application id="samplewins" required_version="1.0"/>
+ <tizen:privilege name="http://tizen.org/privilege/tizen" />
+ <tizen:privilege name="http://tizen.org/privilege/application.read" />
+ <icon src="icon.png"/>
+ <name>TizenWinset</name>
+ <tizen:setting screen-orientation="portrait" context-menu="enable" background-support="enable" encryption="disable" nodisplay="false"/>
</widget>
<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>
-
-<!-- START_PROPRIETARY -->
- <li data-role="list-divider">Experimental</li>
- <li><a href="widgets/mapview.html">Map view</a></li>
-<!-- END_PROPRIETARY -->
-
</ul>
</div>
<div data-role="footer">
</div>
<div data-role="fieldcontain">
<label for="number">Number:</label>
- <input type="number" name="number" id="number" value="" />
+ <input type="number" placeholder="number here" name="number" id="number" value="" />
</div>
<div data-role="fieldcontain">
<label for="number-pattern">Number + pattern:</label>
- <input type="number" name="number" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
+ <input type="number" name="number-pattern" pattern="[0-9]*" id="number-pattern" value="" placeholder="Pattern attribute [0-9]* for a numeric keypad" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
-<div data-role="page" id="genlist-swipe" data-add-back-btn="true" data-fit-page-to-window="true">
+<div data-role="page" id="genlist-swipe" data-add-back-btn="true">
<script type="text/javascript">
var openSwipe = function()
{
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
</div>
- </div>
+ </li>
</ul>
</div>
<div data-role="footer">
</div>
-</div>
-
+</div>
\ No newline at end of file
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+
+ <script type="text/javascript">
+ var add = function() {
+ $("#listvi").listview( 'addItem', '<li>Test<div data-role="button" data-inline="true">TEST</div></li>', $("#idx").val() );
+ }
+ var del = function() {
+ $("#listvi").listview( 'removeItem' , $("#idx").val() );
+ }
+ </script>
+
+ <div data-role="header" data-position="fixed">
+ <h1>List vi</h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <input type="text" value="0" id="idx" />
+ <div data-role="button" onclick="add()" data-inline="true">Add</div>
+ <div data-role="button" onclick="del()" data-inline="true">Del</div>
+ <ul id="listvi" data-role="listview">
+ <li><a href="#">Normal lists</a></li>
+ <li><a href="#">Normal lists</a></li>
+ </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><a href="list-vi.html">List vi</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>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
- </fieldset>
+ </fieldset>
<p> Trigged When user clicks a radio button :
<span class="triggered-radio">
<em>(This is updated when user clicks a radio button )</em>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
- <div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar Demo</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li data-role="list-divider">Header</li>
- <li><a href="tabbar_text.html">Tab(text) only</a></li>
- <li><a href="tabbar_icon_text.html">Tab(icon + text) only</a></li>
- <li><a href="tabbar_icon.html">Tab(icon) only</a></li>
- <li><a href="tabbar_title_text.html">Title + Tab(text)</a></li>
- <li><a href="tabbar_title_icon.html">Title Tab(icon) only</a></li>
- <li><a href="tabbar_scrolling.html">Scrolling interation</a></li>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar Demo</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <ul data-role="listview">
+ <li data-role="list-divider">Header</li>
+ <li><a href="tabbar_text.html">Tab(text) only</a></li>
+ <li><a href="tabbar_icon_text.html">Tab(icon + text) only</a></li>
+ <li><a href="tabbar_icon.html">Tab(icon) only</a></li>
+ <li><a href="tabbar_title_text.html">Title + Tab(text)</a></li>
+ <li><a href="tabbar_title_icon.html">Title Tab(icon) only</a></li>
+ <li><a href="tabbar_scrolling.html">Scrolling interation</a></li>
- <li data-role="list-divider">Footer</li>
- <li><a href="tabbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
- <li><a href="tabbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
- <li><a href="tabbar_footer_more.html">[Progressing...]Footer + more + Tab(text)</a></li>
- <li><a href="tabbar_footer_segment.html">Footer + SegmentTab(text)</a></li>
- <li><a href="tabbar_footer_segment_more.html">Footer + more + SegmentTab(text)</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer">
+ <li data-role="list-divider">Footer</li>
+ <li><a href="tabbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
+ <li><a href="tabbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
+ <li><a href="tabbar_footer_more.html">[Progressing...]Footer + more + Tab(text)</a></li>
+ <li><a href="tabbar_footer_segment.html">Footer + SegmentTab(text)</a></li>
+ <li><a href="tabbar_footer_segment_more.html">Footer + more + SegmentTab(text)</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer">
+ </div>
</div>
- </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar text with title</h1>
- </div>
+ <body>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar text with title</h1>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- <div data-role="tabbar">
- <ul>
- <li><a href="#"class="ui-btn-active">Menu</a></li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Share</a></li>
- </ul>
+ <div data-role="footer">
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
-</div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar text with title</h1>
- </div>
+ <body>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar text with title</h1>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- <div data-role="tabbar">
- <ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- </ul>
+ <div data-role="footer">
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
-</div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar text with title</h1>
- </div>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar text with title</h1>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+ <div data-role="footer">
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
- <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
- <ul data-role="listview">
- <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
- <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
- </ul>
- </div>
- <div data-role="tabbar">
- <ul>
- <li><a href="#"class="ui-btn-active">Menu</a></li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Share</a></li>
+ <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <ul data-role="listview">
+ <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
+ </ul>
+ </div>
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
- </ul>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
-</div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar text with title</h1>
- </div>
+ <body>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar text with title</h1>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button">Yes</a>
- <a href="index.html" data-role="button">No</a>
- <a href="index.html" data-role="button">Maybe</a>
+ <div data-role="footer">
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Yes</a>
+ <a href="index.html" data-role="button">No</a>
+ <a href="index.html" data-role="button">Maybe</a>
+ </div>
+ </div>
</div>
- </div>
-</div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar text with title</h1>
- </div>
+ <body>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar text with title</h1>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+ <div data-role="footer">
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
- <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
- <ul data-role="listview">
- <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
- <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
- </ul>
+ <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <ul data-role="listview">
+ <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
+ <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
+ </ul>
+ </div>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="#" data-role="button">Back</a>
+ <a href="#" data-role="button">Next</a>
+ </div>
+ </div>
</div>
- <div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button">Back</a>
- <a href="index.html" data-role="button">Next</a>
- </div>
- </div>
-</div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <div data-role="tabbar">
- <ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- </ul>
- </div>
- </div>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ </ul>
+ </div>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <div data-role="tabbar">
- <ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="tabedit" >Save</a></li>
- <li><a href="#" data-icon="tabedit" >Share</a></li>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#" data-icon="tabedit" class="ui-btn-active">Menu</a></li>
+ <li><a href="#" data-icon="tabedit" >Save</a></li>
+ <li><a href="#" data-icon="tabedit" >Share</a></li>
- </ul>
- </div>
- </div>
+ </ul>
+ </div>
+ </div>
- <div data-role="content">
+ <div data-role="content">
- </div>
+ </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar Scroll</h1>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Tabbar Scroll</h1>
- <div style="white-space:nowrap;" data-scroll="x">
- <div class="ui-scrollview-view" style="display:inline-block">
- <div data-role="tabbar" data-default-list="4">
- <ul>
- <li><a href="#tabbar_persist_c">Next0</a></li>
- <li><a href="#tabbar_persist_a">Menu1</a></li>
- <li><a href="#tabbar_persist_b">Save2</a></li>
- <li><a href="#tabbar_persist_c">Next3</a></li>
- <li><a href="#tabbar_persist_a">Menu4</a></li>
- <li><a href="#tabbar_persist_b">Save5</a></li>
- <li><a href="#tabbar_persist_c">Next6</a></li>
- <li><a href="#tabbar_persist_a">Menu7</a></li>
- <li><a href="#tabbar_persist_b">Save8</a></li>
- <li><a href="#tabbar_persist_c">Next9</a></li>
- <li><a href="#tabbar_persist_a">Menu10</a></li>
- <li><a href="#tabbar_persist_b">Save11</a></li>
- </div>
+ <div style="white-space:nowrap;" data-scroll="x">
+ <div class="ui-scrollview-view" style="display:inline-block">
+ <div data-role="tabbar" data-default-list="4">
+ <ul>
+ <li><a href="#tabbar_persist_c">Next0</a></li>
+ <li><a href="#tabbar_persist_a">Menu1</a></li>
+ <li><a href="#tabbar_persist_b">Save2</a></li>
+ <li><a href="#tabbar_persist_c">Next3</a></li>
+ <li><a href="#tabbar_persist_a">Menu4</a></li>
+ <li><a href="#tabbar_persist_b">Save5</a></li>
+ <li><a href="#tabbar_persist_c">Next6</a></li>
+ <li><a href="#tabbar_persist_a">Menu7</a></li>
+ <li><a href="#tabbar_persist_b">Save8</a></li>
+ <li><a href="#tabbar_persist_c">Next9</a></li>
+ <li><a href="#tabbar_persist_a">Menu10</a></li>
+ <li><a href="#tabbar_persist_b">Save11</a></li>
+ </div>
+ </div>
+ </ul>
+ </div><!-- /tabbar -->
</div>
- </ul>
- </div><!-- /tabbar -->
- </div>
- <div data-role="content">
- <p>Scroll header tabbar left/right </p>
- </div>
+ <div data-role="content">
+ <p>Scroll header tabbar left/right </p>
+ </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <div data-role="tabbar">
- <ul>
- <li><a href="#"class="ui-btn-active">Menu</a></li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Share</a></li>
+ <div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <div data-role="tabbar">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
- </ul>
- </div>
- </div>
+ </ul>
+ </div>
+ </div>
- <div data-role="content">
+ <div data-role="content">
- </div>
+ </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<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">
- <ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- </ul>
- </div>
- </div>
+ <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">
+ <ul>
+ <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="tabedit" ></a></li>
+ </ul>
+ </div>
+ </div>
- <div data-role="content">
- </div>
+ <div data-role="content">
+ </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="themes/default/" />
- <script src="js/jquery.js"></script>
- <script src="js/"></script>
- <script src="theme.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="themes/default/" />
+ <script src="js/jquery.js"></script>
+ <script src="js/"></script>
+ <script src="theme.js"></script>
<script src="js/jquery.mobile.forms.button.extension.js"></script>
</head>
-<body>
+ <body>
-<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">
- <ul>
- <li><a href="#"class="ui-btn-active">Menu</a></li>
- <li><a href="#">Save</a></li>
- <li><a href="#">Share</a></li>
- </ul>
- </div>
- </div>
+ <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">
+ <ul>
+ <li><a href="#"class="ui-btn-active">Menu</a></li>
+ <li><a href="#">Save</a></li>
+ <li><a href="#">Share</a></li>
+
+ </ul>
+ </div>
+ </div>
- <div data-role="content">
- </div>
- <div data-role="footer">
- </div>
-</div>
+ <div data-role="content">
+ </div>
+
+ <div data-role="footer">
+ </div>
+ </div>
-</body>
+ </body>
</html>