Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 404a8da

Browse files
arschmitzarschmitz
committed
Tabs: First pass at ui-tabs integration
1 parent 94b59a3 commit 404a8da

File tree

8 files changed

+1026
-1
lines changed

8 files changed

+1026
-1
lines changed

‎demos/_assets/css/jqm-demos.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -553,7 +553,17 @@ h2.jqm-home-widget {
553553
-moz-box-shadow: -5px 0 5px rgba(0,0,0,.10);
554554
box-shadow: -5px 0 5px rgba(0,0,0,.10);
555555
}
556-
556+
/* tabs */
557+
.tabs-list-left{
558+
width:25%;
559+
float:left;
560+
vertical-align:top;
561+
}
562+
.tabs-list-content{
563+
width:73%;
564+
float:right;
565+
margin:1em 0;
566+
}
557567
/* Responsive */
558568
@media (min-width:46em) {
559569
/* Header logo */

‎demos/widgets/tabs/ajax-content.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="tabs-list-content ui-content">I am ajax tab content i was pulled in from ajax-content.php </div>

‎demos/widgets/tabs/index.php‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Navbar - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
9+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../../js/jquery.js"></script>
12+
<script src="../../_assets/js/"></script>
13+
<script src="../../../js/"></script>
14+
</head>
15+
<body>
16+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
17+
18+
<div data-role="header" class="jqm-header">
19+
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
20+
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
21+
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
22+
<?php include( '../../search.php' ); ?>
23+
</div><!-- /header -->
24+
25+
<div data-role="content" class="jqm-content">
26+
27+
<h1>Tabs <a href="http://api.jquerymobile.com/navbar/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
28+
29+
<p class="jqm-intro">The jQuery mobile tabs widget is actually just an extension of the jQuery ui tabs widget and takes all the same options and methods</p>
30+
</p>
31+
<h2>Use navbar for tabs</h2>
32+
<div data-role="tabs" id="tabs">
33+
<div data-role="navbar">
34+
<ul>
35+
<li><a href="#one" data-ajax="false">one</a></li>
36+
<li><a href="#two" data-ajax="false">two</a></li>
37+
<li><a href="ajax-content.php" data-ajax="false">three</a></li>
38+
</ul>
39+
</div>
40+
<div id="one" class="ui-body-d ui-content">
41+
<h1>First tab contents</h1>
42+
</div>
43+
<div id="two">
44+
<ul data-role="listview" data-inset="true">
45+
<li><a href="#">Acura</a></li>
46+
<li><a href="#">Audi</a></li>
47+
<li><a href="#">BMW</a></li>
48+
<li><a href="#">Cadillac</a></li>
49+
<li><a href="#">Ferrari</a></li>
50+
</ul>
51+
</div>
52+
</div>
53+
<h2>Use inset listview for tabs</h2>
54+
<div data-role="tabs">
55+
<ul data-role="listview" data-inset="true" class="tabs-list-left">
56+
<li><a href="#one" data-ajax="false">one</a></li>
57+
<li><a href="#two" data-ajax="false">two</a></li>
58+
<li><a href="ajax-content.php" data-ajax="false">three</a></li>
59+
</ul>
60+
<div id="one" class="ui-body-d tabs-list-content">
61+
<h1>First tab contents</h1>
62+
</div>
63+
64+
<ul id="two" class="tabs-list-content" data-role="listview" data-inset="true">
65+
<li><a href="#">Acura</a></li>
66+
<li><a href="#">Audi</a></li>
67+
<li><a href="#">BMW</a></li>
68+
<li><a href="#">Cadillac</a></li>
69+
<li><a href="#">Ferrari</a></li>
70+
</ul>
71+
72+
</div>
73+
<h2>Tabbed page content</h2>
74+
<p>You can also use tabs to swap out an enitre pages content <a href="tabbed-content.php">Tabbed Content Pages</a></p>
75+
76+
77+
</div><!-- /content -->
78+
79+
<div data-role="footer" class="jqm-footer">
80+
<p class="jqm-version"></p>
81+
<p>Copyright 2013 The jQuery Foundation</p>
82+
</div><!-- /footer -->
83+
84+
<?php include( '../../global-nav.php' ); ?>
85+
86+
</div><!-- /page -->
87+
</body>
88+
</html>

‎demos/widgets/tabs/tabbed-content.php‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Navbar - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
8+
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
9+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../../js/jquery.js"></script>
12+
<script src="../../../js/"></script>
13+
</head>
14+
<body>
15+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
16+
<div data-role="tabs">
17+
<div data-role="header">
18+
<div data-role="navbar">
19+
<ul>
20+
<li><a href="#one" data-ajax="false">one</a></li>
21+
<li><a href="#two" data-ajax="false">two</a></li>
22+
<li><a href="ajax-content.php" data-ajax="false">three</a></li>
23+
</ul>
24+
</div>
25+
</div>
26+
<div id="one" class="ui-content">
27+
<h1>First tab contents</h1>
28+
</div>
29+
<div id="two" class="ui-content">
30+
<ul data-role="listview" data-inset="true">
31+
<li><a href="#">Acura</a></li>
32+
<li><a href="#">Audi</a></li>
33+
<li><a href="#">BMW</a></li>
34+
<li><a href="#">Cadillac</a></li>
35+
<li><a href="#">Ferrari</a></li>
36+
</ul>
37+
</div>
38+
</div><!-- /content -->
39+
40+
<div data-role="footer" class="jqm-footer">
41+
<p class="jqm-version"></p>
42+
<p>Copyright 2013 The jQuery Foundation</p>
43+
</div><!-- /footer -->
44+
45+
</div><!-- /page -->
46+
</body>
47+
</html>

‎js/index.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
'widgets/table.js',
7575
'widgets/table.columntoggle.js',
7676
'widgets/table.reflow.js',
77+
'widgets/jquery.ui.tabs.js',
78+
'widgets/tabs.js',
7779
'jquery.mobile.zoom.js',
7880
'jquery.mobile.zoom.iosorientationfix.js',
7981
'jquery.mobile.init.js'

‎js/jquery.mobile.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ define([
4141
"./widgets/table",
4242
"./widgets/table.columntoggle",
4343
"./widgets/table.reflow",
44+
"./widgets/jquery.ui.tabs",
45+
"./widgets/tabs",
4446
"./jquery.mobile.zoom",
4547
"./jquery.mobile.zoom.iosorientationfix"
4648
], function( require ) {

0 commit comments

Comments
 (0)