-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
130 lines (114 loc) · 4.62 KB
/
index.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Tour Demo</title>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<!--/// Start of HTML Example ///-->
<h1 data-tour-description="This is the title of the page." data-tour-index="-1">Responsive Web Design Demo</h1>
<h3>Reference to the original responsive design demo
<a href="https://www.w3schools.com/html/html_responsive.asp">here</a>.</h3>
<div id="locations">
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<a href="#" data-tour-title="Link Button" class="btn btn-link">Boom!</a>
</div>
<!-- I'm using index -10 here to show this item first. -->
<div class="city" data-tour-index="-10" data-tour-title="Card Type" data-tour-description="A card will usually be one of multiple similar type items on a page.">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<a href="#" data-tour-index="1" data-tour-title="Primary Button" data-tour-description="I need a longer description for what this thing does." class="btn btn-primary">Boomer!</a>
</div>
<div class="city" id="full-city">
<h2 data-tour-title="Super Title!" data-tour-description="Obviously this is a title.">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<a href="#" class="btn btn-default">Boomie!</a>
</div>
<div class="city">
<h2>New York</h2>
<p>The City of New York is the most populous city in the United States.</p>
<p>New York is an important center for international diplomacy and has been described as the cultural and
financial
capital of the world.</p>
<a href="#" data-tour-title="Default Button" data-tour-index="2" data-tour-description="This is used the most." class="btn btn-default">Boomieist!</a>
</div>
</div>
<div style="clear:both; padding:20px; text-align: center">
<button id="start-tour" class="btn btn-primary">Start Tour</button>
<button id="add-city" class="btn btn-default">Add City</button>
</div>
<!--/// End of HTML Example ///-->
<!--/// Start of JavaScript Example ///-->
<!-- Include jQuery 3.x -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Include the page tour library -->
<script src="js/tour.js"></script>
<!-- Instantiate the page tour library -->
<script>
// Instantiate the actual page tour object.
var PageTour;
try {
PageTour = $.fn.PageTour();
} catch (e) {
console.error('Cannot start page tour: ', e);
}
</script>
<!-- Just some extra testing functionality -->
<script>
// Script to add dynamic "cities" for testing.
$('#start-tour').on('click', PageTour.open);
$('#add-city').on('click', function () {
if (locs.length > 0) {
var loc = locs.shift();
var city = $('<div></div>', { 'class' : 'city' });
city.append(
$('<h2></h2>', { html : loc.loc }),
$('<p></p>', { html : loc.p1 }),
$('<p></p>', {
html : loc.p2,
'data-tour-title' : 'City Description',
'data-tour-Description' : 'This box shows the description of the city.'
})
);
$('#locations').append(city)
}
});
// Test after load adding new elements.
var locs = [
{
loc : 'Emerald City',
p1 : 'Emerald City is located somewhere over the rainbow.',
p2 : 'Emerald has munchkins, witches, and talking scarecrows. I wouldn\'t recommend it.'
},
{
loc : 'Wonderland',
p1 : 'Wonderland is situated behind a mirror.',
p2 : 'If you ever wondered what life would be like on a permanent acid trip, Wonderland is for you.'
}
];
</script>
<!--/// End of JavaScript Example ///-->
</body>
</html>