betajs-browser
Version:
BetaJS-Browser is a client-side JavaScript framework for Browser-specific methods.
85 lines • 2.92 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Router Demo</title>
<script src="../node_modules/betajs-scoped/dist/scoped.js"></script>
<script src="../node_modules/betajs/dist/beta-noscoped.js"></script>
<script src="../dist/betajs-browser-noscoped.js"></script>
<script>
BetaJS.Browser.Dom.ready(function () {
router = new BetaJS.Router.Router();
router.bind("main", "/main", function () {
document.querySelector("[data-selector='page']").style.display = "none";
document.querySelector("#main").style.display = "";
});
router.bind("about", "/about", function () {
document.querySelector("[data-selector='page']").style.display = "none";
document.querySelector("#about").style.display = "";
});
router.bind("pages", "/pages", function () {
index = 1;
document.querySelector("#pages #index").innerHTML = index;
document.querySelector("#pages #next").href = "javascript:router.navigate('/pages/" + (index+1) + "')";
document.querySelector("[data-selector='page']").style.display = "none";
document.querySelector("#pages").style.display = "";
});
router.bind("pages_idx", "/pages/(index:[0-9]+)", function (args) {
index = parseInt(args.index || 1);
document.querySelector("#pages #index").innerHTML = index;
document.querySelector("#pages #next").href = "javascript:router.navigate('/pages/" + (index+1) + "')";
document.querySelector("[data-selector='page']").style.display = "none";
document.querySelector("#pages").style.display = "";
});
router_history = new BetaJS.Router.RouterHistory(router);
router_history.on("change", function () {
document.querySelector("#history").innerHTML = "";
for (var i = 0; i < router_history.count(); ++i)
document.querySelector("#history").appendChild(BetaJS.Browser.Dom.elementByTemplate("<li>" + router_history.get(i).route + "</li>"));
});
//binder = new BetaJS.Browser.HistoryRouteBinder(router);
binder = new BetaJS.Browser.HashRouteBinder(router);
});
</script>
</head>
<body>
<div>
<a href="javascript:router.navigate('/main')">Main</a>
|
<a href="javascript:router.navigate('/pages')">Pages</a>
|
<a href="javascript:router.navigate('/about')">About</a>
|
<a href="javascript:router_history.back()">Back</a>
</div>
<hr />
<div>
<div id="main" data-selector="page">
<h1>
Main
</h1>
Main Content...
</div>
<div id="pages" data-selector="page" style="display:none">
<h1>
Page <span id="index"></span>
</h1>
Page <span id="index"></span> Content
<p>
<a id="next">Next Page</a>
</p>
</div>
<div id="about" data-selector="page" style="display:none">
<h1>
About
</h1>
About Content...
</div>
</div>
<hr />
<p>
History
<ul id="history"></ul>
</p>
</body>
</html>