Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement a hash-key navigation?

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?

like image 835
trnc Avatar asked Feb 12 '12 21:02

trnc


People also ask

What is hash navigation?

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.

How hash is implemented in JavaScript?

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.

Is there a built in hash table in JavaScript?

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.


1 Answers

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

like image 130
Thick Avatar answered Sep 18 '22 14:09

Thick