jQuery History @ jQuery TOOLS - Back button for AJAX apps
The History tool allows you to take control of the browser's back button. This means that when the user clicks on the browser's back or forward buttons your JavaScript functions will notified.
Usage
$("a.links_with_history").history(function(event, hash) {
});You select a one or more anchor links (A tags) from your page and supply a callback function that is called whenever the browser's back (or forward) button is pressed. The callback is called when the link is clicked and when the browser navigates to any of the locations that are specified in the links' href attribute.
The callback takes two arguments. The first one is the jQuery event object and the second one is the anchor link (also called a hash) where the browser is navigating to.
Example Tabs with history
Use the following tabs together with back/forward buttons to see it in action:
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
Lorem ipsum dolor sit amet
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
Title for the third tab pane
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
Fourth pane is here
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
Tabs initialization
$(function() {
$("#flowtabs").tabs("#flowpanes > div", { history: true });
});The history feature of the tabs uses this tool to enable the "back button". The feature is enabled by setting the history configuration variable to true. You can find the above demo here. Here is another demo demonstrating the history feature in scrollable.
