(...)route.js
Indeed, it' is a very nice piece of work
Here is a little example
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/route.js" type="text/javascript"></script> <script> var nbrLoadedPages = 0; var pageNames = []; var staticPages = { "accueil": "Pages/accueil.htm", "gestion": "Pages/gestion.htm", "admin": "Pages/admin.htm" }; var pages = {} displayPage = function (p) { var np = p.param if (pages[np]) { $("#page").html(pages[p.param]); return false; } } setupRoutes = function () { route('#/page/:param').bind(displayPage); } setupRouting = function () { setupRoutes(); hashObject = {}; hashObject._hashchange_last = ''; hashObject._onhashchange = function () { if (hashObject._hashchange_last != location.hash) { hashObject._hashchange_last = location.hash; route(location.hash).run(); } } setInterval(function () { hashObject._onhashchange(); }, 50); } initPages = function () { for (var key in staticPages) { if (staticPages.hasOwnProperty(key)) { pages[key] = null; } } } loadPages = function () { $.each(pages, function (k) { $.get(staticPages[k], (function (r) { pages[k] = r; nbrLoadedPages += 1; })); }); checkLoading = setInterval(checkIfLoaded, 50); } checkIfLoaded = function () { if (nbrLoadedPages < staticPages.length) { // Waiting... } else { $("#main").css("display", "block"); clearInterval(checkLoading); setupRouting(); } } $(document).ready(function () { initPages(); loadPages(); }); </script> </head> <body> <div id="log"> </div> <div id="main" style="display: none"> <center> <div> <h1> <a href="#/page/accueil">Accueil</a> <a href="#/page/gestion">Gestion</a> <a href="#/page/admin">Administration</a> </h1> </div> </center> <div id="page" /> </div> </body> </html>
No comments:
Post a Comment