<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">Controlbar</li>
- <li><a href="widgets/controlbar/controlbar.html">Controlbar</a></li>
- <li><a href="#controlbar_persist_a">Persist toolbar</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>
</div>
</div>
-<div data-role="page" id="controlbar_persist_a">
+<div data-role="page" id="tabbar_persist_a">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-id="persist_header" >
+ <div data-role="tabbar" data-id="persist_header" >
<ul>
- <li><a href="#controlbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
- <li><a href="#controlbar_persist_b" >Save</a></li>
- <li><a href="#controlbar_persist_c" >Next</a></li>
+ <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><!-- /controlbar -->
+ </div><!-- /tabbar -->
</div>
<div data-role="content">
</div>
</div>
-<div data-role="page" id="controlbar_persist_b">
+<div data-role="page" id="tabbar_persist_b">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-id="persist_header" >
+ <div data-role="tabbar" data-id="persist_header" >
<ul>
- <li><a href="#controlbar_persist_a" >Menu</a></li>
- <li><a href="#controlbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
- <li><a href="#controlbar_persist_c" >Next</a></li>
+ <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><!-- /controlbar -->
+ </div><!-- /tabbar -->
</div>
<div data-role="content">
</div>
</div>
-<div data-role="page" id="controlbar_persist_c">
+<div data-role="page" id="tabbar_persist_c">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-id="persist_header" >
+ <div data-role="tabbar" data-id="persist_header" >
<ul>
- <li><a href="#controlbar_persist_a" >Menu</a></li>
- <li><a href="#controlbar_persist_b" >Save</a></li>
- <li><a href="#controlbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
+ <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><!-- /controlbar -->
+ </div><!-- /tabbar -->
</div>
<div data-role="content">
<script src="widgets/pagelayout/barcontrol.js"></script>
<script src="widgets/pagelayout/backbutton-control.js"></script>
<script src="widgets/list/list-edit.js"></script>
- <!-- test file for content div control, not completed yet -->
- <script src="widgets/pagelayout/ctrl-test.js"></script>
+ <link rel="stylesheet" href="./widgets/tabbar/tabbar.css" />
</body>
</html>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
- <div data-role="controlbar" data-style="toolbar">
+ <div data-role="tabbar">
<ul>
- <li id="add"><a data-icon="ctrlbar-create">+1</a></li>
- <li id="add2"><a data-icon="ctrlbar-create">+20</a></li>
- <li id="new"><a data-icon="ctrlbar-delete">reset +1</a></li>
- <li id="new2"><a data-icon="ctrlbar-delete">reset +20</a></li>
+ <li id="add"><a>+1</a></li>
+ <li id="add2"><a>+20</a></li>
+ <li id="new"><a>reset +1</a></li>
+ <li id="new2"><a>reset +20</a></li>
</ul>
</div>
</div><!-- /footer -->
+++ /dev/null
-<!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>
- <script src="js/jquery.mobile.forms.button.extension.js"></script>
- </head>
-<body>
-
- <div data-role="page">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar 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="controlbar_text.html">Tab(text) only</a></li>
- <li><a href="controlbar_icon_text.html">Tab(icon + text) only</a></li>
- <li><a href="controlbar_icon.html">Tab(icon) only</a></li>
- <li><a href="controlbar_title_text.html">Title + Tab(text)</a></li>
- <li><a href="controlbar_title_icon.html">Title Tab(icon) only</a></li>
- <li><a href="controlbar_scrolling.html">Scrolling interation</a></li>
-
- <li data-role="list-divider">Footer</li>
- <li><a href="controlbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
- <li><a href="controlbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
- <li><a href="controlbar_footer_more.html">[Progressing...]Footer + more + Tab(text)</a></li>
- <li><a href="controlbar_footer_segment.html">Footer + SegmentTab(text)</a></li>
- <li><a href="controlbar_footer_segment_more.html">Footer + more + SegmentTab(text)</a></li>
-
- <li data-role="list-divider">Old version</li>
- <li><a href="#Tabbar_Main">Tabbar Style</a></li>
- <li><a href="#Toolbar">Toolbar Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
-
-
-
-
- <div data-role="page" id="controlbar-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>ControlBar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#Tabbar_Main">Tabbar Style</a></li>
- <li><a href="#Toolbar">Toolbar Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- </div>
-
- <!-- ControlBar Tabbar Style -->
- <div data-role="page" id="Tabbar_Main">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#TabbarInHeader">Tabbar in Header</a></li>
- <li><a href="#Tabbar2Items">2 Items Style</a></li>
- <li><a href="#Tabbar3Items">3 Items Style</a></li>
- <li><a href="#Tabbar4Items">4 Items Style</a></li>
- <li><a href="#Tabbar5Items">5 Items Style</a></li>
- <li><a href="#TabbarText">Only Text Style</a></li>
- <li><a href="#TabbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div data-role="page" id="TabbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /navbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
- <div data-role="page" id="Tabbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Tabbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarText">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="TabbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Tabbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Icon Style List</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <!-- Toolbar Style -->
- <div data-role="page" id="Toolbar">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#ToolbarInHeader">Toolbar in Header</a></li>
- <li><a href="#Toolbar2Items">2 Items Style</a></li>
- <li><a href="#Toolbar3Items">3 Items Style</a></li>
- <li><a href="#Toolbar4Items">4 Items Style</a></li>
- <li><a href="#Toolbar5Items">5 Items Style</a></li>
- <li><a href="#ToolbarText">Only Text Style</a></li>
- <li><a href="#ToolbarIcon">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarInHeader">
- <div data-role="header" data-position="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Test</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- </div>
- </div>
-
-
- <div data-role="page" id="Toolbar2Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">2 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar3Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">3 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar4Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">4 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="Toolbar5Items">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">5 Items Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarText">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Text Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" class="ui-btn-active">Songs</a></li>
- <li><a href="#">Favorites</a></li>
- <li><a href="#">Group</a></li>
- <li><a href="#">Message</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
-
- <div data-role="page" id="ToolbarIcon">
- <div data-role="header" data-position="fixed">
- <h1>Toolbar</h1>
- </div>
- <div data-role="content">
- <div class="content-primary">
- <ul data-role="listview">
- <li><a href="#">Only Icon Style</a></li>
- </ul>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div><!-- /controlbar -->
- </div>
- </div>
- <!-- Toolbar Style -->
-
-
-</body>
-</html>
+++ /dev/null
-<!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>
- <script src="js/jquery.mobile.forms.button.extension.js"></script>
- </head>
-<body>
-
-<div data-role="page">
- <div data-role="header" data-position="fixed">
- <h1>Controlbar icon with title</h1>
- <div data-role="controlbar">
- <ul>
- <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
- </ul>
- </div>
- </div>
-
- <div data-role="content">
- </div>
-</div>
-
-</body>
-</html>
</div>
</div> <!-- /content -->
<div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="toolbar" >
+ <div data-role="tabbar">
<ul>
<li id="gallery-add"><a href="#">Add</a></li>
<li id="gallery-del"><a href="#">Delete</a></li>
</div>
<div data-role="content" id="content1">
<ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#Tabbar_Main">ControlBar</a></li>
+ <li><a href="#Tabbar_Main">Tabbar</a></li>
</ul>
</div>
<div data-role="content" id="content2">
</ul>
</div>
<div data-role="footer"data-position ="fixed">
- <div data-role="controlbar" data-style="tabbar" id="ctrlbar_5item" >
+ <div data-role="tabbar" data-style="tabbar" id="ctrlbar_5item" >
<ul>
- <li><a href="#page1" data-for="content1" data-icon="ctrlbar-menu" >Menu</a></li>
- <li><a href="#page2" data-for="content2" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#page3" data-for="content3" data-icon="ctrlbar-share" >Share</a></li>
+ <li><a href="#page1" data-for="content1" data-icon="tab-menu" >Menu</a></li>
+ <li><a href="#page2" data-for="content2" data-icon="tab-save" >Save</a></li>
+ <li><a href="#page3" data-for="content3" data-icon="tab-share" >Share</a></li>
</ul>
</div>
</div>
/* test file for content div control, not completed yet */
$( "#ctrlbar_5item" ).live( "click", function() {
var a;
- $("#ctrlbar_5item").controlbar('enable', a);
- $("#ctrlbar_5item").controlbar('disable', undefined);
+ $("#ctrlbar_5item").tabbar('enable', a);
+ $("#ctrlbar_5item").tabbar('disable', undefined);
});
--- /dev/null
+.ui-btn-up-s .ui-icon-tabedit {.tizen-icon-common; background-image: url(00_tab_edit.png); }
+
+.ui-btn-hover-s .ui-icon-tabedit,
+.ui-btn-active.ui-btn-up-s .ui-icon-tabedit,
+.ui-btn-down-s .ui-icon-tabedit {.tizen-icon-common; background-image: url(00_tab_edit_press.png); }
--- /dev/null
+<!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>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+ <div data-role="page">
+ <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>
+
+ <li data-role="list-divider">Old version</li>
+ <li><a href="#Tabbar_Main">Tabbar Style</a></li>
+ <li><a href="#Toolbar">Toolbar Style</a></li>
+ </ul>
+ </div><!--/content-primary -->
+ </div>
+ </div>
+</body>
+</html>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
+ <h1>Tabbar text with title</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
<li><a href="#"class="ui-btn-active">Menu</a></li>
<li><a href="#">Save</a></li>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
+ <h1>Tabbar text with title</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ <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">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
+ <h1>Tabbar text with title</h1>
</div>
<div data-role="content">
<div data-role="footer">
<a data-icon="naviframe-more"></a>
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
<li><a href="#"class="ui-btn-active">Menu</a></li>
<li><a href="#">Save</a></li>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
+ <h1>Tabbar text with title</h1>
</div>
<div data-role="content">
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
+ <h1>Tabbar text with title</h1>
</div>
<div data-role="content">
<div data-role="page">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
- <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ <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">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrl-edit" >Save</a></li>
- <li><a href="#" data-icon="ctrl-edit" >Share</a></li>
+ <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 data-role="page">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
<li><a href="#"class="ui-btn-active">Menu</a></li>
<li><a href="#">Save</a></li>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <div data-role="controlbar">
+ <div data-role="tabbar">
<ul>
<li><a href="#"class="ui-btn-active">Menu</a></li>
<li><a href="#">Save</a></li>
--- /dev/null
+<!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>
+ <script src="js/jquery.mobile.forms.button.extension.js"></script>
+ </head>
+<body>
+
+<div data-role="page">
+ <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>
+
+</body>
+</html>
<div data-role="page">
<div data-role="header" data-position="fixed">
- <h1>Controlbar text with title</h1>
- <div data-role="controlbar">
+ <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>
>[data-role="button"] {
font-size : 15 * @unit_base;
font-weight : bold;
- color : @color_controlbar_btn_normal;
+ color : @color_tabbar_btn_normal;
}
[data-role="controlgroup"] {
@import "config.less";
/***************************************************************************
- Controlbar
+ Tabbar
***************************************************************************/
-.ui-controlbar {
+.ui-tabbar {
background : @color_bg;
z-index : 1000;
- &.ui-portrait-controlbar {
+ &.ui-portrait-tabbar {
height : 55 * @unit_base;
}
- &.ui-landscape-controlbar {
+ &.ui-landscape-tabbar {
height : 55 * @unit_base;
}
a.ui-btn {
background : @color_bg;
- color : @color_controlbar_btn_normal;
+ color : @color_tabbar_btn_normal;
.ui-icon {
width: 32 * @unit_base;
}
}
- &.ui-controlbar-persist {
+ &.ui-tabbar-persist {
a.ui-btn {
background: @color_bg;
}
a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
- color : @color_controlbar_btn_pressed;
+ color : @color_tabbar_btn_pressed;
}
a.ui-btn-hover-s.ui-btn-down-s {
&:not(.ui-state-persist) {
- color : @color_controlbar_btn_pressed;
- background: @color_controlbar_btn_tab_press;
+ color : @color_tabbar_btn_pressed;
+ background: @color_tabbar_btn_tab_press;
}
}
}
- &:not(.ui-controlbar-persist) {
+ &:not(.ui-tabbar-persist) {
a.ui-btn {
background: @color_bg;
}
a.ui-btn-active, .ui-btn-show-style {
- color : @color_controlbar_btn_pressed;
+ color : @color_tabbar_btn_pressed;
}
a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
- color : @color_controlbar_btn_pressed;
- background: @color_controlbar_btn_tab_press;
+ color : @color_tabbar_btn_pressed;
+ background: @color_tabbar_btn_tab_press;
}
}
}
}
- &.ui-controlbar-noicons {
+ &.ui-tabbar-noicons {
.ui-btn-inner {
padding-top : 19 * @unit_base;
padding-bottom : 18 * @unit_base;
}
}
- &.ui-controlbar-notext {
+ &.ui-tabbar-notext {
.ui-btn-inner {
padding-top : 50 * @unit_base;
padding-bottom : 5 * @unit_base;
}
}
-/* title font size when title controlbar */
-.ui-header.ui-bar-s.ui-title-controlbar {
+/* title font size when title tabbar */
+.ui-header.ui-bar-s.ui-title-tabbar {
.ui-title {
font-size : 22 * @unit_base;
margin-top : 8 * @unit_base;
margin-bottom : 0 * @unit_base;
}
- .ui-controlbar {
- &.ui-controlbar-noicons {
+ .ui-tabbar {
+ &.ui-tabbar-noicons {
.ui-btn-inner {
padding-top : 15 * @unit_base;
padding-bottom : 13 * @unit_base;
}
}
- &.ui-controlbar-notext {
+ &.ui-tabbar-notext {
.ui-btn-inner {
padding-top : 47 * @unit_base;
padding-bottom : 0 * @unit_base;
}
}
- &.ui-portrait-controlbar {
+ &.ui-portrait-tabbar {
height : 47 * @unit_base;
}
- &.ui-landscape-controlbar {
+ &.ui-landscape-tabbar {
height : 40 * @unit_base;
}
}
}
.ui-header.ui-bar-s {
- &.ui-title-controlbar-multiline {
+ &.ui-title-tabbar-multiline {
height : 75 * @unit_base;
- .ui-controlbar {
+ .ui-tabbar {
height : 75 * @unit_base;
.ui-btn-inner {
padding-top : 45 * @unit_base;
.ui-footer.ui-bar-s {
- .ui-controlbar {
+ .ui-tabbar {
height : 49 * @unit_base;
margin-left : auto;
}
}
- .ui-controlbar.ui-controlbar-margin-back {
+ .ui-tabbar.ui-tabbar-margin-back {
margin-right : 56 * @unit_base;
}
- .ui-controlbar.ui-controlbar-margin-more {
+ .ui-tabbar.ui-tabbar-margin-more {
margin-left : 56 * @unit_base;
}
}
-.ui-controlbar-s.ui-navbar-noicons {
+.ui-tabbar-s.ui-navbar-noicons {
font-size : 22 * @unit_base;
-}
-
-.ui-btn-up-s {
- .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit.png); }
-
-}
-
-.ui-btn-down-s, .ui-btn-hover-s, .ui-btn-active {
- .ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit_press.png); }
-}
-
+}
\ No newline at end of file
../common/jquery.mobile.popup.css \
../common/jquery.mobile.tizen.popup.less.css \
../common/jquery.mobile.tizen.misc.less.css \
- ../common/jquery.mobile.tizen.controlbar.less.css
+ ../common/jquery.mobile.tizen.tabbar.less.css
all: prepare css images js
/***************************************************************************
- Controlbar
+ Tabbar
***************************************************************************/
-@color_controlbar_btn_tab_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
-@color_controlbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P : Tab pressed */
-@color_controlbar_btn_normal : rgba(153, 153, 153, 1); /* B052L6 : Tab Normal */
+@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
+@color_tabbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P : Tab pressed */
+@color_tabbar_btn_normal : rgba(153, 153, 153, 1); /* B052L6 : Tab Normal */
/***************************************************************************
List
* DEALINGS IN THE SOFTWARE.
* ***************************************************************************
*
- * jQuery Mobile Framework : "controlbar" plugin
+ * jQuery Mobile Framework : "tabbar" plugin
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
/**
- * Controlbar can be created using data-role = "controlbar" inside footer
- * Framework determine which controlbar will display with controlbar attribute
+ * Tabbar can be created using data-role = "tabbar" inside footer
+ * Framework determine which tabbar will display with tabbar attribute
*
* Examples:
*
- * HTML markup for creating controlbar: ( 2 ~ 5 li item available )
- * icon can be changed data-icon attribute
+ * HTML markup for creating tabbar: ( 2 ~ 5 li item available )
+ * icon can be changed data-icon attribute (customized icon need)
* <div data-role="footer" data-position ="fixed">
- * <div data-role="controlbar">
+ * <div data-role="tabbar">
* <ul>
- * <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- * <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- * <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+ * <li><a href="#" class="ui-btn-active">Menu</a></li>
+ * <li><a href="#">Save</a></li>
+ * <li><a href="#">Share</a></li>
* </ul>
* </div>
* </div>
(function ( $, undefined ) {
- $.widget( "tizen.controlbar", $.mobile.widget, {
+ $.widget( "tizen.tabbar", $.mobile.widget, {
options: {
iconpos: "top",
grid: null,
- initSelector: ":jqmData(role='controlbar')"
+ initSelector: ":jqmData(role='tabbar')"
},
_create: function () {
- var $controlbar = this.element,
- $ctrlbtns = $controlbar.find( "a" ),
- iconpos = $ctrlbtns.filter( ":jqmData(icon)" ).length ?
+ var $tabbar = this.element,
+ $tabbtns = $tabbar.find( "a" ),
+ iconpos = $tabbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined,
- textpos = $ctrlbtns.html().length ? true : false,
+ textpos = $tabbtns.html().length ? true : false,
theme = $.mobile.listview.prototype.options.theme, /* Get current theme */
ww = window.innerWidth || $( window ).width(),
wh = window.innerHeight || $( window ).height(),
isLandscape = ww > wh && ( ww - wh );
if ( isLandscape ) {
- $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
+ $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
} else {
- $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
+ $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
}
/*
- $controlbar
+ $tabbar
.addClass( "ui-navbar" )
.attr( "role", "navigation" )
.find( "ul" )
.grid( { grid: this.options.grid } );
*/
- $controlbar.addClass( "ui-navbar" )
+ $tabbar.addClass( "ui-navbar" )
.find( "ul" )
.grid( { grid: this.options.grid } );
- if ( $controlbar.parents( ".ui-footer" ).length ) {
- $controlbar.find( "li" ).addClass( "ui-ctrl-btn-style" );
+ if ( $tabbar.parents( ".ui-footer" ).length ) {
+ $tabbar.find( "li" ).addClass( "ui-tab-btn-style" );
}
- /* title controlbar */
- if ( $controlbar.siblings( ".ui-title" ).length ) {
- $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar" );
+ /* title tabbar */
+ if ( $tabbar.siblings( ".ui-title" ).length ) {
+ $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar" );
}
if ( !iconpos ) {
- $controlbar.addClass( "ui-controlbar-noicons" );
+ $tabbar.addClass( "ui-tabbar-noicons" );
}
if ( !textpos ) {
- $controlbar.addClass( "ui-controlbar-notext" );
+ $tabbar.addClass( "ui-tabbar-notext" );
}
if ( textpos && iconpos ) {
- $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar-multiline" );
+ $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar-multiline" );
}
- $ctrlbtns.buttonMarkup({
+ $tabbtns.buttonMarkup({
corners: false,
shadow: false,
iconpos: iconpos
});
- if ( $controlbar.find( ".ui-state-persist" ).length ) {
- $controlbar.addClass( "ui-controlbar-persist" );
+ if ( $tabbar.find( ".ui-state-persist" ).length ) {
+ $tabbar.addClass( "ui-tabbar-persist" );
}
- $controlbar.delegate( "a", "vclick", function ( event ) {
- $ctrlbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
+ $tabbar.delegate( "a", "vclick", function ( event ) {
+ $tabbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
});
- $controlbar.addClass( "ui-controlbar");
+ $tabbar.addClass( "ui-tabbar");
$( document ).bind( "pagebeforeshow", function ( event, ui ) {
var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
- controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" ),
- $elFooterMore = controlbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
- $elFooterBack = controlbar_filter.siblings( ".ui-btn-back" );
+ tabbar_filter = footer_filter.find( ":jqmData(role='tabbar')" ),
+ $elFooterMore = tabbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
+ $elFooterBack = tabbar_filter.siblings( ".ui-btn-back" );
footer_filter
.css( "position", "fixed" )
.css( "bottom", 0 )
- .css( "height", controlbar_filter.height() );
+ .css( "height", tabbar_filter.height() );
if ( $elFooterMore.length )
- controlbar_filter.addClass( "ui-controlbar-margin-more" );
+ tabbar_filter.addClass( "ui-tabbar-margin-more" );
if ( $elFooterBack.length )
- controlbar_filter.addClass( "ui-controlbar-margin-back" );
+ tabbar_filter.addClass( "ui-tabbar-margin-back" );
});
$( document ).bind( "pageshow", function ( e, ui ) {
- var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
+ var tabbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='tabbar')" ),
element_width = 0,
- element_count = controlbar_filter.find( 'li' ).length;
+ element_count = tabbar_filter.find( 'li' ).length;
- if ( controlbar_filter.length ) {
- element_width = controlbar_filter.find("li:first").width();
- controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
+ if ( tabbar_filter.length ) {
+ element_width = tabbar_filter.find("li:first").width();
+ tabbar_filter.find("li:last").width( tabbar_filter.width() - element_width * ( element_count - 1 ) );
}
});
$( window ).bind( "resize", function ( e ) {
- var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
+ var tabbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='tabbar')" ),
element_width = 0,
- element_count = controlbar_filter.find( 'li' ).length;
+ element_count = tabbar_filter.find( 'li' ).length;
- if ( controlbar_filter.length ) {
- element_width = controlbar_filter.find("li:first").width();
- controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
+ if ( tabbar_filter.length ) {
+ element_width = tabbar_filter.find("li:first").width();
+ tabbar_filter.find("li:last").width( tabbar_filter.width() - element_width * ( element_count - 1 ) );
}
});
- this._bindControlbarEvents();
+ this._bindTabbarEvents();
},
- _bindControlbarEvents: function () {
- var $controlbar = this.element;
+ _bindTabbarEvents: function () {
+ var $tabbar = this.element;
$( window ).bind( "orientationchange", function ( e, ui ) {
var ww = window.innerWidth || $( window ).width(),
isLandscape = ww > wh && ( ww - wh );
if ( isLandscape ) {
- $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
+ $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
} else {
- $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
+ $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
}
});
},
//auto self-init widgets
$( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();
+ $( $.tizen.tabbar.prototype.options.initSelector, e.target ).tabbar();
});
}( jQuery ) );
+++ /dev/null
-/*
- * controlbar unit tests
- */
-
-(function ($) {
- $.mobile.defaultTransition = "none";
-
- module( "Controlbar" );
-
- var unit_controlbar = function ( widget, drayStyle ) {
- var controlbar,
- controlbar_style,
- item_count,
- activeIndex,
- deactiveReturn,
- activeReturn,
- created_controlbar = widget.controlbar();
-
- /* Create */
- ok( created_controlbar, "Create" );
-
- if ( drayStyle ) {
- if ( drayStyle == "icon" ) {
- equal( created_controlbar.find( "a" ).is(".ui-btn-icon_only" ), true, "Icon only style test");
- } else if ( drayStyle == "text" ) {
- equal( created_controlbar.is(".ui-controlbar-noicons" ), true, "Text only style test");
- }
- }
-
- /* Check APIs */
- activeIndex = created_controlbar.find(".ui-btn-active").index();
- created_controlbar.controlbar( "disable", activeIndex );
- deactiveReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
-
- equal( deactiveReturn, true, "List Deactive test" );
-
- created_controlbar.controlbar("enable", activeIndex);
- activeReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
- equal( activeReturn, false, "List Active test" );
- };
-
- test( "controlbar normal style test", function () {
- unit_controlbar( $("#controlbar-test") );
- });
-
- test( "controlbar icon style test", function () {
- unit_controlbar( $("#controlbar-test-icon-only"), "icon" );
- });
-
- test( "controlbar text style test", function () {
- unit_controlbar( $("#controlbar-test-text-only"), "text" );
- });
-})(jQuery);
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
- data-framework-theme="tizen-white"
- data-framework-viewport-scale=false>
- </script>
-
- <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
-
- <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
-
- <script src="controlbar-tests.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-test" data-role="controlbar">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-test-icon-only" data-role="controlbar">
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-test-text-only" data-role="controlbar">
- <ul>
- <li><a href="#" >Menu</a></li>
- <li><a href="#" class="ui-btn-active">Save</a></li>
- <li><a href="#" >Share</a></li>
- <li><a href="#" >Timeline</a></li>
- <li><a href="#" >WorldClock</a></li>
- </ul>
- </div>
- </div>
-</div>
-</body>
-</html>
/*
- * controlbar unit tests
+ * segmentcontrol unit tests
*/
(function ($) {
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-scale=false>
+ </script>
+
+ <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+ <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+ <script src="tabbar-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+</div>
+
+<div data-nstest-role="page">
+ <div data-nstest-role="header" data-nstest-position="inline">
+ <h1>Controlbar Test - markup</h1>
+ </div>
+ <div data-nstest-role="content">
+ </div>
+ <div data-nstest-role="footer">
+ <div id="tabbar-test-text-only" data-role="tabbar">
+ <ul>
+ <li><a href="#" >Menu</a></li>
+ <li><a href="#" class="ui-btn-active">Save</a></li>
+ <li><a href="#" >Share</a></li>
+ <li><a href="#" >Timeline</a></li>
+ <li><a href="#" >WorldClock</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</body>
+</html>
--- /dev/null
+/*
+ * tabbar unit tests
+ */
+
+(function ($) {
+ $.mobile.defaultTransition = "none";
+
+ module( "Tabbar" );
+
+ var unit_tabbar = function ( widget, drayStyle ) {
+ var tabbar,
+ tabbar_style,
+ item_count,
+ activeIndex,
+ deactiveReturn,
+ activeReturn,
+ created_tabbar = widget.tabbar();
+
+ /* Create */
+ ok( created_tabbar, "Create" );
+
+ if ( drayStyle ) {
+ if ( drayStyle == "icon" ) {
+ equal( created_tabbar.find( "a" ).is(".ui-btn-icon_only" ), true, "Icon only style test");
+ } else if ( drayStyle == "text" ) {
+ equal( created_tabbar.is(".ui-tabbar-noicons" ), true, "Text only style test");
+ }
+ }
+
+ /* Check APIs */
+ activeIndex = created_tabbar.find(".ui-btn-active").index();
+ created_tabbar.tabbar( "disable", activeIndex );
+ deactiveReturn = created_tabbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+
+ equal( deactiveReturn, true, "List Deactive test" );
+
+ created_tabbar.tabbar("enable", activeIndex);
+ activeReturn = created_tabbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+ equal( activeReturn, false, "List Active test" );
+ };
+
+ test( "tabbar text style test", function () {
+ unit_tabbar( $("#tabbar-test-text-only"), "text" );
+ });
+})(jQuery);
"autodividers",
"button",
"check",
- "controlbar",
+ "tabbar",
"datetimepicker",
"extendablelist",
"handler",
projects / platform / framework / web / web-ui-fw.git / commitdiff
