Can't understand History.js, need it simplified?

Question

I'm fairly new to programming, and I'm making an AJAX site with the help of jQuery.

I've looked around a fair bit for an AJAX history handler, and figured that History.js seems to be the best/most up-to-date.

My menu buttons each have their own unique ID's (#homeBtn, #featuresBtn, #pricingBtn), and currently look like this:

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

Can someone give me an example (preferably on jsfiddle) on how I would implement History.js?

I can't seem to grasp any of the examples given by the author, and I simply need a dumbed down version =b

If you need any more information, please let me know, and thanks!

Answer 1

Follow the instructions here: https://github.com/browserstate/ajaxify

Change your links to traditional links href="#home" to href="/home" - make sure http://mywebsite.com/home works. This is all about graceful up-gradation.

Answer 2

I think the "dumbed down" version you need is a router abstraction. I've written a simple one for my own purposes, called StateRouter.js. It basically takes care of directing URLs supported by your application to the correct functions, you can even define parameter parts of routes (so that e.g. the 'id' part of http://example.com/persons/id becomes a function parameter).

This simple example code should demonstrate how it's used:

var router = new staterouter.Router(); // Configure routes router   .route('/', getHome)   .route('/persons', getPersons)   .route('/persons/:id', getPerson); // Perform routing of the current state router.perform(); // Navigate to the page of person 1 router.navigate('/persons/1'); 

Here's a little fiddle I've concocted in order to demonstrate its usage.