[ACCEPTED]-How to implement a hash-key navigation?-navigation

Accepted answer
Score: 31

With a hash-based navigation structure, you'll 30 be defining your routes and their handlers 29 via JS in the browser... When the hash is 28 changed, a 'hashchange' event is fired, and 27 the 'window.onhashchange' handler function 26 is called.*

e.g.

if ("onhashchange" in window) {  
  alert("The browser supports the hashchange event!");  
}  

function locationHashChanged() {  
  if (location.hash === "#somecoolfeature") {  
    somecoolfeature();  
  }  
}  

window.onhashchange = locationHashChanged;

There's the option of using 25 the more recently introduced HTML5 pushstate, too.

Check 24 out http://www.microjs.com/#spa for some good JS routing libraries--some 23 of them provide support for HTML5 pushstate 22 as well as fallbacks to hashchange for older 21 browsers.

If you're looking to build a serious 20 application you could use something like 19 Backbone.js to handle models, views, routing, etc. You 18 should also check out Crossroads.js (routing 17 library) and its accompanying Hasher.js 16 (hashchange/pushstate library) if you don't 15 need all the extras that come with Backbone.

...or 14 there's LeviRoutes (HTML5 pushstate only, VERY 13 much like routing in Express for Node.js).

...or 12 Jquery BBQ (for Jquery/hashchange-based/some 11 nice features -- (github.com/cowboy/jquery-bbq)

...and 10 then, there's Director (hashchange/tons 9 of features/works in Node.js and the browser/similar 8 to Express routing/developed mostly by the 7 folks at Nodejitsu).

*Note: if you're focusing 6 on SEO, then hashchange/ajax will introduce 5 some problems...you may want to read through 4 Google's webmaster guidelines -- http://code.google.com/web/ajaxcrawling/docs/getting-started.html

**P.S. you 3 can find all the abovementioned libraries 2 on the MicroJS.com site, except for Jquery 1 BBQ

Score: 5

Using the example you gave above, and keeping 1 things simple, you could do the following:

function aboutHandler() {
  //Do stuff--e.g. get via AJAX -> render template (optional) -> append HTML to an element
}

function newsHandler() {
  //Do stuff
}

function productsHandler() {
  //Do stuff
}

function locationHashChanged() {  
  (location.hash === "#/about/") &&  aboutHandler();
  (location.hash === "#/news/") && newsHandler();
  (location.hash === "#/products/") && productsHandler();  
  }  
}  

window.onhashchange = locationHashChanged;
Score: 2

It looks like you are developing a single 3 page application. So, I would recommend 2 you to use Backbone.js. Here is a code snippet for 1 your task.

<script>
    var Controller = Backbone.Router.extend({
        routes: {
            "/about/": "about",
            "/news/": "news",
            "/products/": "products"
        },
        about: function(){
          // ...
        },
        news: function(){
          // ...
        },
        products: functions(){
          // ...
        }
    });

    var controller = new Controller();
    Backbone.history.start();

</script>

Backbone. What is a router?

More Related questions