A key part of navigating around the web is the ability to control the direction we travel. While this may sound a little odd, there are occasions when we need to go backwards, to revisit something we've already viewed. This doesn't always work, depending on the environment—this is where the history plugin can help.
This is a simple plugin tool that allows you to take control of the browser's history. This means that as and when you navigate back and forth through pages, the browser's buttons will be notified, so you can use them to navigate correctly.
It should be noted though that while the history function can be called using code such as the following, it is more likely that you will use this as a configuration option within one of the tools, such as Tabs or Scrollable:
$("a.links_with_history").history(function(event, hash) {
});
To illustrate how this could be used with something such as Tabs, have a look at the following code:
$(function() {
$("#flowtabs").tabs("#flowpanes > div", { history: true });
});
This will reference the same history functionality that is available separately within the jQuery Tools library. If used correctly, you will be able to navigate backward and forward using the browser's buttons—if you navigate through each tab of a Tab, for example, then using the Back button will take you back through each tab that you've visited, in the order of visit:
The URLs that are generated will look similar to the following:
http://flowplayer.org/tools/demos/tabs/history.html#streaming_tab
You can bookmark these URLs in the normal manner; if you bookmark one of these links, and return to it later, you will be able to load that specific "section". In this example, it will load the specific tab that has been referenced by the requested URL.
Note
It is important to note that although this is described as an HTML5 library, the current release of Tools (version 1.2.6, at the time of writing) is not able to handle certain formats that are otherwise standard for HTML5. For example, you can use http://flowplayer.org/tools/demos/tabs/history.html#123, but you won't be able to use something like: http://flowplayer.org/tools/demos/tabs/history.html/#/page/#SecondTab.
Let's now have a look at another component of the Toolbox, Expose.