-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
113 lines (94 loc) · 5.23 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function() {
$( "[data-role = 'navbar']" ).navbar();
$( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});
// Update the the toolbar's contents
$( document ).on( "pagecontainerchange", function() {
// Each of the 4 pages in this example has a data-title attribute
// which value is equal to the nav button's text
// For e.g., on first page: <div data-role = "page" data-title = "Details">
var current = $(".ui-page-active").jqmData( "title" );
// Change the heading
$( "[data-role = 'header'] h1" ).text( current );
// Remove active class
$( "[data-role = 'navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
// Add active class to current nav button
$( "[data-role = 'navbar'] a" ).each(function() {
if ( $( this ).text() === current ) {
$( this ).addClass( "ui-btn-active" );
}
});
});
</script>
<title>Test</title>
</head>
<body>
<div data-role = "header" data-position = "fixed" data-theme = "a">
<a href = "" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon
ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Details</h1>
</div>
<div data-role = "page" data-title = "Details" class = "jqm-demos" id="details">
<div role = "main" class = "ui-content jqm-content jqm-fullwidth">
<h1>jQuery Mobile</h1>
<p>The jQuery Mobile is a user interface framework which is built on
jQuery core and used for developing responsive websites or applications that
are accessible on mobile, tablet and desktop devices. It uses features of both
jQuery and jQueryUI to provide API features for mobile web applications.</p>
<ul class = "list">
<li><p>The jQuery Mobile creates web applications in such a way that it
will work the same way on the mobile, tablet and desktop devices.</p></li>
<li><p>The jQuery Mobile is compatible with other frameworks such as
<i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
<li><p>The jQuery Mobile provides set of touch friendly form inputs and
UI widgets.</p></li>
<li><p>The progressive enhancement brings you functionality to all mobile,
tablet and desktop platforms and adds efficient page loads and wider device
support.</p></li>
</ul>
</div>
</div>
<div data-role = "page" data-title = "Details" class = "jqm-demos" id="workload">
<div role = "main" class = "ui-content jqm-content jqm-fullwidth">
<h1>Workload</h1>
<p>The jQuery Mobile is a user interface framework which is built on
jQuery core and used for developing responsive websites or applications that
are accessible on mobile, tablet and desktop devices. It uses features of both
jQuery and jQueryUI to provide API features for mobile web applications.</p>
<ul class = "list">
<li><p>The jQuery Mobile creates web applications in such a way that it
will work the same way on the mobile, tablet and desktop devices.</p></li>
<li><p>The jQuery Mobile is compatible with other frameworks such as
<i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
<li><p>The jQuery Mobile provides set of touch friendly form inputs and
UI widgets.</p></li>
<li><p>The progressive enhancement brings you functionality to all mobile,
tablet and desktop platforms and adds efficient page loads and wider device
support.</p></li>
</ul>
</div>
</div>
<div data-role = "footer" data-position = "fixed" data-theme = "a">
<div data-role = "navbar">
<ul>
<li><a href = "#details"
data-prefetch = "true" data-transition = "flip">Details</a></li>
<li><a href = "#workload" data-prefetch = "true"
data-transition = "fade">Friends</a></li>
<li><a href = "/jquery_mobile/src/page_two.html" data-prefetch = "true"
data-transition = "slide">Messages</a></li>
<li><a href = "/jquery_mobile/src/page_three.html" data-prefetch = "true"
data-transition = "turn">Emails</a></li>
</ul>
</div>
</div>
</body>
</html>