-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcars.html
110 lines (66 loc) · 2.3 KB
/
cars.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
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script>
var cars = [
{
"model": "MX-5",
"make": "Mazda",
"year": "1998",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/2011_Mazda_MX-5_PRHT_--_04-28-2011.jpg/640px-2011_Mazda_MX-5_PRHT_--_04-28-2011.jpg"
},
{
"model": "Enzo",
"make": "Red car",
"year": "2002",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/RedEnzo.jpg/640px-RedEnzo.jpg"
}
];
function showCar (carIndex) {
// this updates the car details page
var carContainer = document.getElementById("carDetails");
carContainer.innerHTML = '<h1>' + cars[carIndex].make + " " + cars[carIndex].model + '(' + cars[carIndex].year + ')' + '</h1>';
carContainer.innerHTML += '<img src ="' + cars[carIndex].image + '" width="250"/>';
// this opens the car details page
$.mobile.changePage('#item', {role: 'dialog'});
}
//
$( "#list" ).live ( "pageinit", function( event ) {
for (i=0; i<cars.length; i++) {
$("#carList").append ('<li><a data-role="button" href="javascript: showCar(' + i + ');">' + cars[i].make + " " + cars[i].model + '</a></li>');
}
// this makes sure the buttons are styled
$("#carList").listview("refresh");
});
</script>
</head>
<body>
<div data-role="page" id="list">
<div data-role="header">
<h1>My favourite cars</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="carList"></ul>
</div>
<div data-role="footer">
<h1>© 2013</h1>
</div>
</div>
<div data-role="page" id="item">
<div data-role="header">
<h1 id="make">Car details</h1>
</div>
<div data-role="content">
<center>
<div id="carDetails">Insert name and picture here</div>
</center>
<a href="#" data-rel="back" data-role="button">Back</a>
</div>
<div data-role="footer">
<h1>© 2014</h1>
</div>
</div>
</body>
</html>