I want to implement an Ajax based hash-key navigation like this:
http://www.foo.bar/#/about/
http://www.foo.bar/#/news/
http://www.foo.bar/#/products/
How can I implement this structure?
Hash-based navigation enables you to pass data from the hash to any view, and to adjust the current hash so that you can use it as a bookmarkable URL. It also enables the user to use the browser history buttons for navigation and depending on the hash you can also generate views automatically.
You can implement a Hash Table in JavaScript in three steps: Create a HashTable class with table and size initial properties. Add a hash() function to transform keys into indices. Add the set() and get() methods for adding and retrieving key/value pairs from the table.
There exist two components of Hash tables in JavaScript: an “Object” and a “Hash Function”: Object: An object contains the hash table in which the data is stored. It holds all the “key-value” pairs of the hash table.
With a hash-based navigation structure, you'll be defining your routes and their handlers via JS in the browser... When the hash is changed, a 'hashchange' event is fired, and the 'window.onhashchange' handler function 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 the more recently introduced HTML5 pushstate, too.
Check out http://www.microjs.com/#spa for some good JS routing libraries--some of them provide support for HTML5 pushstate as well as fallbacks to hashchange for older browsers.
If you're looking to build a serious application you could use something like Backbone.js to handle models, views, routing, etc. You should also check out Crossroads.js (routing library) and its accompanying Hasher.js (hashchange/pushstate library) if you don't need all the extras that come with Backbone.
...or there's LeviRoutes (HTML5 pushstate only, VERY much like routing in Express for Node.js).
...or Jquery BBQ (for Jquery/hashchange-based/some nice features -- (github.com/cowboy/jquery-bbq)
...and then, there's Director (hashchange/tons of features/works in Node.js and the browser/similar to Express routing/developed mostly by the folks at Nodejitsu).
*Note: if you're focusing on SEO, then hashchange/ajax will introduce some problems...you may want to read through Google's webmaster guidelines -- http://code.google.com/web/ajaxcrawling/docs/getting-started.html
**P.S. you can find all the abovementioned libraries on the MicroJS.com site, except for Jquery BBQ
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With