mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 14:19:17 +08:00
100 lines
2.8 KiB
HTML
100 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Nav Bars</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../dist/ionic.css">
|
|
</head>
|
|
<body>
|
|
|
|
<section>
|
|
|
|
<header id="nav-bar" class="bar bar-header bar-dark">
|
|
<h1 class="title"></h1>
|
|
</header>
|
|
|
|
<main class="has-header content" id="content">
|
|
</main>
|
|
</section>
|
|
|
|
<script src="../../js/events.js"></script>
|
|
<script src="../../js/gestures.js"></script>
|
|
<script src="../../js/views/navBar.js"></script>
|
|
<script src="../../js/controllers/navController.js"></script>
|
|
<script>
|
|
// Grab the sections
|
|
var navBar = document.getElementById('nav-bar');
|
|
var cd = document.getElementById('content');
|
|
|
|
var View = function(opts) {
|
|
this.el = opts.el;
|
|
};
|
|
var content = new View({
|
|
el: cd
|
|
});
|
|
|
|
|
|
var controller = function(opts) {
|
|
this.el = opts.el;
|
|
}
|
|
controller.prototype = {
|
|
visibilityChanged: function() {
|
|
if(this.isVisible) {
|
|
//this.el.style.display = 'block';
|
|
if(this._lastNodeSpot) {
|
|
this._lastNodeParent.insertBefore(this.el, this._lastNodeSpot);
|
|
} else {
|
|
content.el.appendChild(this.el);
|
|
}
|
|
} else {
|
|
//this.el.style.display = 'none';
|
|
var parentNode = this.el.parentNode;
|
|
if(!parentNode) {
|
|
return;
|
|
}
|
|
var next = this.el.nextSibling;
|
|
this._lastNodeSpot = next;
|
|
this._lastNodeParent = parentNode;
|
|
parentNode.removeChild(this.el);
|
|
}
|
|
}
|
|
};
|
|
|
|
var createPage = function(title) {
|
|
var d = document.createElement('div');
|
|
d.innerHTML = '<h3>' + title + '</h3><a href=#" class="next button button-success">Next</a>';
|
|
var c = new controller({
|
|
el: d
|
|
});
|
|
c.title = title;
|
|
return c;
|
|
};
|
|
|
|
var page1 = createPage('Home');
|
|
var page2 = createPage('About');
|
|
var page3 = createPage('Cats');
|
|
var page4 = createPage('Pizza');
|
|
|
|
var pages = [page1, page2, page3, page4];
|
|
|
|
var c = new ionic.controllers.NavController({
|
|
navBar: new ionic.ui.NavBar({ el: navBar }),
|
|
content: content
|
|
});
|
|
c.push(page1);
|
|
|
|
var currentPage = 1;
|
|
document.addEventListener('click', function(event) {
|
|
if(event.target.classList.contains('next')) {
|
|
c.push(pages[currentPage++ % pages.length]);
|
|
}
|
|
return false;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|