$(selector).hr(variable, callback)

Attach a handler to the url changing when the selected element is in the dom. See this in action. See a demonstration on the tabs feature page.

Single Variable

$('#selector').hr('variable', function(value, variable) { //event code });

Every Variable - Called every time any variable is updated

$('#selector').hr('_', function(values, name) { //value //key });

$(selector).hr(variables, callback)

Multiple Variables - Only called once per request cycle

$('#selector').hr(['var1', 'var2'], function(values, name) { //values - A hash of all values declared in the event //name - The value that changed, others may have changed });

Every Variable Exclusive - Only called once per request cycle

$('#selector').hr(['_'], function(values, name) { //values - A hash of all values declared in the event //name - The value that changed, others may have changed });

Restrict Variable Values

$('#selector').hr({page:['index','details']}, function(value, name) { //value - will be index or details //name - The value that changed });

$.hr.init(options)

Calling the initialize method is required to use HashRouter.

Options (default):

For example:

$.hr.init(); //use defaults, no route $.hr.init({autoParse:false}); //disable automatic parsing

$.hr.get(variable)

Gets the current value of a variable, or the default value if it is not defined.

//example.com/#!/studentID:444 $.hr.get('studentID'); //444

$.hr.set(variable, value)

Sets the current value of a variable. Does NOT change the URL. This will temporarily override the value retrieved through get() until the next url change. To change the URL use setUrl().

$.hr.set('studentID', '1234'); $.hr.get('studentID'); //1234

$.hr.remove(variable)

Removes the current value of a variable. Does NOT change the URL. This will temporarily override the value retrieved through get() until the next url change.

$.hr.remove('studentID');

$.hr.getDefault(variable)

Gets the default value of a variable.

$.hr.getDefault('studentID');

$.hr.setDefault(variable, value)

Sets the default value of a variable, this will be used when not specified in the url.

$.hr.setDefault('page', 'view'); //example.com/#!/ $.hr.get('page'); //view //example.com/#!/page:edit $.hr.get('page'); //edit

$.hr.removeDefault(variable)

Deletes the the default value of a variable.

$.hr.setDefault('page', 'view'); $.hr.get('page'); //view $.hr.removeDefault('page'); $.hr.get('page'); //undefined

$.hr.getKeys()

Gets an array of all currently defined variable names including defaults.

//example.com/#!/page:edit/id:44 $.hr.getKeys(); // [page, id]

$.hr.getAll()

Gets an object of all currently defined variables including defaults.

//example.com/#!/page:edit/id:44 $.hr.getAll(); // {page:'edit', id:'44'}

$.hr.setUrl(variable, value[, reset])

Updates a single variable in the url with a new value. Updating the URL will trigger any events bound to that variable. Optionally specify reset as a boolean to change url to only the supplied value.

//example.com/#!/page:view/studentID:22 $.hr.setUrl('studentID', 44); //example.com/#!/page:view/studentID:44 $.hr.setUrl('page', 'list', true); //example.com/#!/page:list

$.hr.setUrl(variables[, reset])

Sets multiple values in the url at the same time to new values. Updating the URL will trigger any events bound to those variables. Optionally specify reset as a boolean to change url to only the supplied values.

//example.com/#!/page:view/studentID:22 $.hr.setUrl({'studentID': 44, page: 'edit'}); //example.com/#!/page:edit/studentID:44 $.hr.setUrl({'page': 'list'}, true); //example.com/#!/page:list

$.hr.trigger(variable)

Execute all bound events associated with the given variable. Frequently used with default values when a page is first loaded to cause initial behavior.

$.hr.init(); $.hr.setDefault('page', 'list'); $.hr.trigger('page');

$.hr.triggerAll()

Execute all bound events associated with variables currently in the url or default state.

//example.com/#!/page:list/studentID:44 $.hr.triggerAll(); //triggers page and studentID events

$.hr.bind()

Identical to $(element).hr() except allows binding without a jquery dom selector. Interally events bound without a dom selector are bound to the document object.

$.hr.bind('page', function(value){ //event code });

$.hr.parseElement(element)

Parse all link tags in the element, converting them based on existing url values.

$('#container').load('student.html', function(){ $.hr.parseElement('#container'); });

For details on link structure, read the Dynamic Links page.