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

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

  • Features-jquery-aria
    jQuey Logo: (c) The jQuery Project

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.

6 Kommentare

Felix Nagel

11. Oktober 2012

Google?

Nicht auf Anhieb, hast du schon mal das hier versucht:

 

stackoverflow.com/questions/3676128/jquery-ui-tabs-disable-ajax-functionality-for-some-tabs


Markus

11. Oktober 2012

ui.tabs in Verbindung mit base href tag

Hallo,

jemand eine Idee, wie man das Nutzen kann, wenn auf der Seite das base href -tag genutzt wird?

 

Wird der volle Link, relativ zur Basis angegeben:

/order/seite.htm#tabs-1

 

Ergebnis ist, das dieser Verweis wie ein extrerner Link behandelt wird und die GANZE Seite seite.htm in den entsprechenden Tab geladen.

 

Wird der Link, wie im Beispiel deklariert (nur ), führt der Klick darauf logischerweise auf die im base href angegebene url (angehangen wird #ui-tabs-1)

 

Grüße

Markus


Felix Nagel

17. Juni 2010

It's about jQuery UI Tabs

As far as i know you could load everything you want to, so If your tab anchor points to a php file you could process php as well.

 

jQuery UI Tabs supports all options jqQuery.ajax() supports:

jqueryui.com/demos/tabs/

 

 

Additionally your question about SEO has nothing to do about my implementation. As far as i can see its about your server / CMS.

code.google.com/intl/de-DE/web/ajaxcrawling/docs/getting-started.html


Fa-sum

15. Juni 2010

Yes, I mean if there are problems inserting php code into tab's content. I did not try this yet, but with the example provided by Asul, creator of Jquery Address, it was not possible (without modifications) because of the particular way to process the content (in the example, tab's input was xml).


Another thing: why don't you implement what requested by Google for indexing ajax content?


Thank you in advance


Felix Nagel

13. Juni 2010

I'sorry...

....but i really dont know what you're asking for.


Its possible to use AJAX Tabs but what tdo you mean with insert php to tabs?


Fa-sum

12. Juni 2010

Hi, is it possible to insert php code into the tabs?


Thank you in advance