jQuery ARIA with browser history support: tabs, lightbox and sortable tables

06. Juni 2010, Felix Nagel in jQuery, Accessibility, Open Source, English

A few month ago I received some requests about adding browser history support and browser title support to my jQuery ARIA widgets. As this would be nice feature for both, usability and accessibility, I allocated some time to get this done.

 

I quickly realized I should use a already further developed third party add-on as the needed functionality isn't trivial business. After some research via Google and a few tests with other extensions for adding history support I stumbled upon jQuery Address by Asual and started testing it.

 

In my opinion its the best one out there, so here we are:

 

New Features

The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.

 

jQuery Address supports:

  • Bookmarking in a browser or social website
  • Sending links via email or instant messenger
  • Finding specific content using the major search engines
  • Utilizing browser history and reload buttons

 

(from http://www.asual.com/jquery/)

 

Usability is improved as your browser title and address bar is changing when using my applications. So please give it a try  and change the URL in the address bar yourself when using this...

 

 

Demos

 

 

How to add jQuery Address support

Get the latest master branch commit (as for the moment only the master branch supports jQuery Address). Inlcude jQuery Address:

<script type="text/javascript" src="js/jquery.address-1.2.1.js?strict=0"></script>
Include jQuery Address core file

As you can see above its possible to pass some parameters to jQury Adress, please take a look here. This is not needed!

 

Thats it, JQuery Address support is enabled by default but you can set some options to change the behaviour within my widgets:

Usage and options

$(function() {
	$("#tabs")			
	.tabs({				
		jqAddress: {
			enable: true,
			title: {
				enable: true,
				split: ' | '		
			}
		}
	}); 	
});		
Usage with default options

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

0 Kommentare