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
});
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
});
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
Gets the current value of a variable, or the default value if it is not defined.
//example.com/#!/studentID:444
$.hr.get('studentID'); //444
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
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');
Gets the default value of a variable.
$.hr.getDefault('studentID');
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
Deletes the the default value of a variable.
$.hr.setDefault('page', 'view');
$.hr.get('page'); //view
$.hr.removeDefault('page');
$.hr.get('page'); //undefined
Gets an array of all currently defined variable names including defaults.
//example.com/#!/page:edit/id:44
$.hr.getKeys(); // [page, id]
Gets an object of all currently defined variables including defaults.
//example.com/#!/page:edit/id:44
$.hr.getAll(); // {page:'edit', id:'44'}
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
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
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');
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
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
});
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.