Automatic ajax jquery navigation, mobile friendly (beta)

The goal of the jQuery plugin Ajax-Navigation is to
  • Automatically transform regular links into ajax calls (using href, target, title and content attribute)
  • For mobile browsers, avoid showing address bar on link clicks, smoothing the user experience
  • Enable onLoad and onUnload function for each "Page" navigated for having cool transition (like window-mobile UI for instance)
  • Manage atomatically the History with those same onload/onunload function if existing

Ajax Navigation : example and documentation

Basic Ajax navigation

Ajax-Navigation will ajax-navigate automaticaly any link :

  • <a href="myUrl" ajax-content="any selector" ajax-target="any selector" title="my title">link</a>
  • href : url to be used by the ajax call
  • title : the future document title
  • ajax-content : (optional) only the content of specified element in href's page will be inserted otherwise all body content
  • ajax-target : (optional) the content will be inserted into the target element of the current page

Note : ajax call will NOT be made if any of the following case is true

  • target=="_blank"
  • has the class "noAjax"
  • href=="javascript://"
  • href contains "http"
  • rel attribute == "external"

Home made transition between pages

automatic ajax navigation and transitions

For now this process is :

  • 0 : if exists : execute the ajax-onunload function/code of old state
  • 0-bis : if exists : the ajax-unload function launch its callback()
  • 1 : ajax get the new appropriate content of new page and insert it at the proper place
  • 2 : if exists : execute its ajax-onload function/code

ajax-onload : if the "ajax-content" element have an ajax-onload attribute, this javascript code is executed when the content is loaded.
If the ajax-onload is a js function name, this function is called with the given options parameter usable at will :

  • {
  • target : $("body") | $(target),
  • currentState : state, //Balupton History.js state, See doc
  • previousState : state, //Balupton History.js state, See doc
  • clickedSelector : selector, //jQuery unique selector of the clicked element
  • }

ajax-onunload: if the "ajax-content" element have an ajax-onunload attribute this javascript code will be executed when the user will change the history state.
If the ajax-onunload is a js function name, this function is called with the given options parameter usable at will.

  • {
  • target : $("body") | $(target),
  • currentState : state, //Balupton History.js state, See doc
  • previousState : state, //Balupton History.js state, See doc
  • callback : callback, //HAVE TO EXECUTE WHEN UNLOAD COMPLETE options.callback();
  • }

The plugin is in beta, if you find any issue, let me know

Try jQuery Ajax-Navigation : Add this to your code
  • <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  • <script type="text/javascript" src="http://www.jquery-css.com/js/navigate.js" ></script>

Automatic ajax navigation : give me feedback !