Newer
Older
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
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../packages/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../packages/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../packages/jqwidgets/css/jqx.base.css">
<link rel="stylesheet" href="../packages/jqwidgets/css/jqx.darkblue.css">
<title>Navstate Mock</title>
</head>
<body>
<section class="container-fluid">
<header class="page-header">
<h1>Keep Track of Navigation State</h1>
</header>
<nav>
<ul id="qfqTabs" class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#tab1" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation"><a href="#tab2" data-toggle="tab">Tab 2</a>
</li>
<li role="presentation"><a href="#tab3" data-toggle="tab">Tab 3</a>
</li>
</ul>
</nav>
<div class="row">
<div class="col-sm-12">
<a href="http://qfq.math.uzh.ch/raos/qfq-jqw/mockup/first.html">Up and away</a>
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<div class="row">
<h1 class="col-sm-12">
Tab Pane 1
</h1>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu augue id lectus eleifend rutrum
eu in metus. Nunc aliquet fringilla quam, vitae congue lorem imperdiet ut. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Donec id dignissim libero, quis fringilla quam. Nam non convallis
mi. Phasellus vel tortor lacus. Phasellus nec enim non est venenatis bibendum. Ut sed tristique
ante, ut lacinia ligula. Curabitur interdum porta sem. Vivamus finibus metus massa, sed ullamcorper
nibh pulvinar nec. Nam in dolor tempus, eleifend mi sit amet, dictum diam. Aliquam lacus eros,
maximus nec lacinia sit amet, accumsan quis odio. Maecenas sodales libero in lorem consequat,
ullamcorper placerat diam ullamcorper. Nullam eu gravida nunc. Donec sit amet urna ullamcorper,
euismod nibh a, fermentum sapien.
</p>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Ut eget odio sit amet ipsum congue efficitur. Ut pellentesque venenatis dolor a tempor. Morbi eu
velit non leo consequat maximus. Vestibulum bibendum, nisi vestibulum faucibus facilisis, lacus nunc
facilisis quam, non maximus tellus felis quis dolor. Fusce molestie nibh nec eros dapibus, ut auctor
augue condimentum. Proin dignissim dictum est ut luctus. Fusce consectetur velit id vehicula
condimentum.
</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<div class="row">
<h1 class="col-sm-12">
Tab Pane 2
</h1>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu augue id lectus eleifend rutrum
eu in metus. Nunc aliquet fringilla quam, vitae congue lorem imperdiet ut. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Donec id dignissim libero, quis fringilla quam. Nam non convallis
mi. Phasellus vel tortor lacus. Phasellus nec enim non est venenatis bibendum. Ut sed tristique
ante, ut lacinia ligula. Curabitur interdum porta sem. Vivamus finibus metus massa, sed ullamcorper
nibh pulvinar nec. Nam in dolor tempus, eleifend mi sit amet, dictum diam. Aliquam lacus eros,
maximus nec lacinia sit amet, accumsan quis odio. Maecenas sodales libero in lorem consequat,
ullamcorper placerat diam ullamcorper. Nullam eu gravida nunc. Donec sit amet urna ullamcorper,
euismod nibh a, fermentum sapien.
</p>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Ut eget odio sit amet ipsum congue efficitur. Ut pellentesque venenatis dolor a tempor. Morbi eu
velit non leo consequat maximus. Vestibulum bibendum, nisi vestibulum faucibus facilisis, lacus nunc
facilisis quam, non maximus tellus felis quis dolor. Fusce molestie nibh nec eros dapibus, ut auctor
augue condimentum. Proin dignissim dictum est ut luctus. Fusce consectetur velit id vehicula
condimentum.
</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<div class="row">
<h1 class="col-sm-12">
Tab Pane 3
</h1>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu augue id lectus eleifend rutrum
eu in metus. Nunc aliquet fringilla quam, vitae congue lorem imperdiet ut. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Donec id dignissim libero, quis fringilla quam. Nam non convallis
mi. Phasellus vel tortor lacus. Phasellus nec enim non est venenatis bibendum. Ut sed tristique
ante, ut lacinia ligula. Curabitur interdum porta sem. Vivamus finibus metus massa, sed ullamcorper
nibh pulvinar nec. Nam in dolor tempus, eleifend mi sit amet, dictum diam. Aliquam lacus eros,
maximus nec lacinia sit amet, accumsan quis odio. Maecenas sodales libero in lorem consequat,
ullamcorper placerat diam ullamcorper. Nullam eu gravida nunc. Donec sit amet urna ullamcorper,
euismod nibh a, fermentum sapien.
</p>
</div>
<div class="row">
<p class="col-sm-8 col-sm-offset-2">
Ut eget odio sit amet ipsum congue efficitur. Ut pellentesque venenatis dolor a tempor. Morbi eu
velit non leo consequat maximus. Vestibulum bibendum, nisi vestibulum faucibus facilisis, lacus nunc
facilisis quam, non maximus tellus felis quis dolor. Fusce molestie nibh nec eros dapibus, ut auctor
augue condimentum. Proin dignissim dictum est ut luctus. Fusce consectetur velit id vehicula
condimentum.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 alert-info" id="console">
</div>
</div>
</section>
Rafael Ostertag
committed
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
QfqNS.Log.level = 0;
var qfqPageState = new QfqNS.PageState();
var qfqPage = new QfqNS.QfqPage({pageState: qfqPageState});
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>