To add some missing functionality to our asynchronous navigation, we're going to use Ben Alman's excellent jQuery BBQ plugin. Even though that name might make you feel hungry, BBQ stands for Back Button and Query in this case. We'll keep working with the files we created in the last example.
- First, we'll need to get a copy of the BBQ plugin to work with. Head over to http://benalman.com/projects/jquery-bbq-plugin/ to get the download file and the documentation and examples for the jQuery BBQ plugin.
As usual, we're going to download the minified version of the plugin and drop it into our
scriptsfolder alongside jQuery and ourscripts.jsfile.
- Next, open up each of the HTML pages of your mini website and add the BBQ plugin, after jQuery and before
scripts.js:<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.ba-bbq.min.js"></script> <script type="text/javascript" src="scripts/scripts.js"></script> </body> </html>
Now we're ready to get to work on building the deluxe version of our asynchronous navigation.
What just happened?
We downloaded the jQuery BBQ plugin and attached it to each of our pages. So far, this hasn't made a difference on our site — we've attached the BBQ plugin, but we aren't using it to do anything. Next up, we'll take a look at how to put the BBQ plugin to use.