waypoint
Version:
Waypoint provides browser and server side routing
63 lines (60 loc) • 1.62 kB
HTML
<html>
<head>
</head>
<body>
<div id="content">Loading...</div>
<a href="testing">Testing</a>
<a href="alt">Alt</a>
<a href="not-found">Not found</a>
<a href="alt/example">Alt example</a>
<script src="js/jquery.min.js"></script>
<script src="js/waypoint.min.js"></script>
<script>
jQuery(function ($) {
var $content = $('#content'),
router = new Waypoint.Router({
routeMap : {
// Create a route map so that we can set
// callbacks for different URIs
'/' : function () {
$content.html('Default content');
},
'/testing' : function () {
$content.html('testing');
},
'/alt' : {
'' : function () {
$content.html('alt');
},
'/example' : function () {
$content.html('example');
}
}
},
notFound : function () {
$content.html('Not found');
}
}),
firstPop = true,
dispatch = function () {
var path = window.location.pathname;
window.console && window.console.log(path);
router.dispatch(path);
firstPop = false;
};
// Dispatch when back/forward buttons used
$(window).on('popstate', dispatch);
// popstate not triggered after domload for
// Firefox so we check ourselves if firstPop
setTimeout(function () { firstPop && dispatch() }, 50);
// Listen and override all <a> elements
$(window).on('click', 'a', function (e) {
e.preventDefault();
window.history.pushState(null, null, this.href);
dispatch();
});
});
</script>
</body>
</html>