<!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>
<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>