Skip to content

Instantly share code, notes, and snippets.

@cowboy
Created October 26, 2009 19:37
Show Gist options
  • Save cowboy/218953 to your computer and use it in GitHub Desktop.
Save cowboy/218953 to your computer and use it in GitHub Desktop.
HTML
====
<p>jQuery BBQ enables simple, yet powerful bookmarkable #hash history via a cross-browser window.onhashchange event. In addition, jQuery BBQ provides a full jQuery.deparam() method, along with both fragment and query string parse and merge utility methods.</p>
<p><strong>This plugin and the <a href="http://benalman.com/projects/jquery-urlinternal-plugin/">jQuery urlInternal</a> plugin supersede the URL Utils plugin.</strong></p>
<ul>
<li>Release v1.0.2</li>
<li>Tested with jQuery 1.3.2 and jQuery 1.4pre in Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.</li>
<li>Download <a href="http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.js">Source</a>, <a href="http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.min.js">Minified</a> (3.1kb)</li>
<li>Follow the project on <a href="http://github.com/cowboy/jquery-bbq">GitHub project page</a></li>
<li>View <a href="http://benalman.com/code/projects/jquery-bbq/docs/">Full Documentation</a></li>
<li>View <a href="http://benalman.com/code/projects/jquery-bbq/unit/">Unit Tests</a></li>
<li>Examples: <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">basic window.onhashchange</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">advanced window.onhashchange</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">jQuery UI Tabs history &amp; bookmarking</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/deparam/">jQuery.deparam</a></li>
</ul>
<p>Note: If you&#8217;re using jQuery BBQ to merge query string or fragment params containing <code>[]</code>, you&#8217;ll want to borrow the <a href="http://gist.github.com/206323">jQuery 1.4 <code>jQuery.param</code> method</a>.</p>
<h3>What jQuery BBQ allows you to do:</h3>
<p>While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read <a href="http://benalman.com/code/projects/jquery-bbq/docs/">the documentation</a>, and check out the full examples listed above.</p>
<ul>
<li>Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (coming in jQuery 1.4). (<a href="http://benalman.com/code/projects/jquery-bbq/examples/deparam/">example</a>)</li>
<li>Merge any URL plus query string or fragment params&#8212;in an object, params string or second URL (including the current document location)&#8212;into a new URL.</li>
<li>Update the &#8220;URL attribute&#8221; (ie. <code>a[href]</code>, <code>img[src]</code>, <code>form[action]</code>, etc) in multiple elements, merging any URL plus query string or fragment params&#8212;in an object, params string or second URL (including the current document location)&#8212;into a new URL, which is then set into that attribute.</li>
<li>Push (and retrieve) bookmarkable, history-enabling &#8220;state&#8221; objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications (<a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">example 1</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">example 2</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">example 3</a>)</li>
<li>Bind event handlers to a normalized, cross-browser <code>window.onhashchange</code> event (<a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/">example 1</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/">example 2</a>, <a href="http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/">example 3</a>)</li>
</ul>
MARKDOWN
========
jQuery BBQ enables simple, yet powerful bookmarkable #hash history via a cross-browser window.onhashchange event. In addition, jQuery BBQ provides a full jQuery.deparam() method, along with both fragment and query string parse and merge utility methods.
**This plugin and the [jQuery urlInternal](http://benalman.com/projects/jquery-urlinternal-plugin/) plugin supersede the URL Utils plugin.**
* Release v1.0.2
* Tested with jQuery 1.3.2 and jQuery 1.4pre in Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.
* Download [Source][src], [Minified][src-min] (3.1kb)
* Follow the project on [GitHub project page][github]
* View [Full Documentation][docs]
* View [Unit Tests][unit]
* Examples: [basic window.onhashchange][ex-frag-basic], [advanced window.onhashchange][ex-frag-advanced], [jQuery UI Tabs history & bookmarking][ex-frag-tabs], [jQuery.deparam][ex-deparam]
[github]: http://github.com/cowboy/jquery-bbq
[src]: http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.js
[src-min]: http://github.com/cowboy/jquery-bbq/raw/master/jquery.ba-bbq.min.js
[docs]: http://benalman.com/code/projects/jquery-bbq/docs/
[ex-frag-basic]: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
[ex-frag-advanced]: http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
[ex-frag-tabs]: http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
[ex-deparam]: http://benalman.com/code/projects/jquery-bbq/examples/deparam/
[unit]: http://benalman.com/code/projects/jquery-bbq/unit/
Note: If you're using jQuery BBQ to merge query string or fragment params containing `[]`, you'll want to borrow the [jQuery 1.4 `jQuery.param` method](http://gist.github.com/206323).
### What jQuery BBQ allows you to do: ###
While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read [the documentation][docs], and check out the full examples listed above.
* Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (coming in jQuery 1.4). ([example][ex-deparam])
* Merge any URL plus query string or fragment params--in an object, params string or second URL (including the current document location)--into a new URL.
* Update the "URL attribute" (ie. `a[href]`, `img[src]`, `form[action]`, etc) in multiple elements, merging any URL plus query string or fragment params--in an object, params string or second URL (including the current document location)--into a new URL, which is then set into that attribute.
* Push (and retrieve) bookmarkable, history-enabling "state" objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications ([example 1][ex-frag-basic], [example 2][ex-frag-advanced], [example 3][ex-frag-tabs])
* Bind event handlers to a normalized, cross-browser `window.onhashchange` event ([example 1][ex-frag-basic], [example 2][ex-frag-advanced], [example 3][ex-frag-tabs])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment