added bbq-pjax add-on, added example implementation

michaek · Jun 20, 2011 · e4feecc · e4feecc
1 parent 62636d7
commit e4feecc
Show file tree

Hide file tree

Showing 17 changed files with 9,321 additions and 1 deletion.
diff --git a/examples/config.php b/examples/config.php
@@ -12,7 +12,7 @@
 $shell['h3'] = ob_get_contents();
 ob_end_clean();
 
-$shell['jquery'] = 'jquery-1.4.1.js';
+$shell['jquery'] = 'jquery-1.6.1.js';
 //$shell['jquery'] = 'jquery-1.3.2.js';
 
 $shell['shBrush'] = array( 'JScript' );

diff --git a/examples/fragment-pjax/bbq.jpg b/examples/fragment-pjax/bbq.jpg
diff --git a/examples/fragment-pjax/burger.html b/examples/fragment-pjax/burger.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="burger.jpg" width="400" height="300">
+<h1>Delicious Burgers</h1>
+<p>It might look like more food than you can eat, but trust me, you'll finish 
+this burger. What, you say you're a vegetarian? Ok then, try the
+<a href="chicken.html">Chicken</a>!</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/burger.jpg b/examples/fragment-pjax/burger.jpg
diff --git a/examples/fragment-pjax/chicken.html b/examples/fragment-pjax/chicken.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="chicken.jpg" width="400" height="300">
+<h1>Mesquite Rub Chicken</h1>
+<p>This spicy meal might have you begging for "cerveza" but you'll be coming back for 
+seconds! Still hungry? Why not wash that chicken down with a heaping plate of
+<a href="kebabs.html">Kebabs</a>?</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/chicken.jpg b/examples/fragment-pjax/chicken.jpg
diff --git a/examples/fragment-pjax/index.php b/examples/fragment-pjax/index.php
@@ -0,0 +1,204 @@
+<?php
+
+include "../index.php";
+
+$shell['title3'] = "hashchange » Basic";
+
+$shell['h2'] = 'Cached AJAX + fragment + history + bookmarking = Tasty!';
+
+// ========================================================================== //
+// SCRIPT
+// ========================================================================== //
+
+ob_start();
+?>
+
+// Disable pushState? This just allows you to pass ?disable=true to test without pushState.
+$.support.pushState = <?php print $_GET['disable'] ? 'false' : 'true' ?>;
+
+// This is really all you need!
+$(function(){
+
+  $('.bbq-item').bbq_pjax({linkSelector: 'a'});
+
+});
+
+<?php
+$shell['script'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML HEAD ADDITIONAL
+// ========================================================================== //
+
+ob_start();
+?>
+<script type="text/javascript" src="../../jquery.ba-bbq.js"></script>
+<script type="text/javascript" src="../../jquery.bbq.pjax.js"></script>
+<script type="text/javascript" language="javascript">
+
+<?php print $shell['script']; ?>
+
+$(function(){
+
+  // Syntax highlighter.
+  SyntaxHighlighter.highlight();
+
+});
+
+</script>
+<style type="text/css" title="text/css">
+
+/*
+bg: #FDEBDC
+bg1: #FFD6AF
+bg2: #FFAB59
+orange: #FF7F00
+brown: #913D00
+lt. brown: #C4884F
+*/
+
+.bbq {
+  margin-bottom: 1em;
+}
+
+.bbq-content {
+  border-left: 1px solid #913D00;
+  border-right: 1px solid #913D00;
+  padding: 8px;
+  margin: 0;
+  float: left;
+  width: 682px;
+  height: 302px;
+}
+
+.bbq-item h1 {
+  margin: 0;
+  font-size: 180%;
+}
+
+.bbq-item p {
+  font-size: 150%;
+  margin: 5px 0 0;
+}
+
+.bbq-item img {
+  border: 1px solid #913D00;
+  float: right;
+  margin-left: 10px;
+}
+
+a.bbq-current {
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.bbq-nav {
+  padding: 0.3em;
+  color: #C4884F;
+  border: 1px solid #C4884F;
+  background: #FFD6AF;
+  clear: both;
+  text-align: center;
+}
+
+.bbq-nav-top {
+  margin-bottom: 0;
+  -moz-border-radius-topleft: 10px;
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-left-radius: 10px;
+  -webkit-border-top-right-radius: 10px;
+}
+
+.bbq-nav-bottom {
+  margin-top: 0;
+  -moz-border-radius-bottomleft: 10px;
+  -moz-border-radius-bottomright: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -webkit-border-bottom-right-radius: 10px;
+}
+
+#page {
+  width: 700px;
+}
+
+</style>
+<?php
+$shell['html_head'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML BODY
+// ========================================================================== //
+
+ob_start();
+?>
+<?php print $shell['donate'] ?>
+
+<p>
+  With <a href="http://benalman.com/projects/jquery-bbq-plugin/">jQuery BBQ</a> you can keep track of state, history and allow bookmarking while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser's back and next buttons, reload the page.. and when you're done playing, check out the code!
+</p>
+
+<p>
+  In this basic example, window.location.hash is used to store a simple string value of the file to be loaded via AJAX, so that not only a history entry is added, but also so that the page, in its current state, can be bookmarked. Because the hash contains only a single filename, this example doesn't support multiple content boxes, each with their own state, on the same page, but that's definitely still possible! Just check out the <a href="../fragment-advanced/">advanced window.onhashchange</a> example.
+</p>
+
+<h3>Navigation</h3>
+
+<div class="bbq">
+  <div class="bbq-nav bbq-nav-top">
+    <a href="burger.html">Burgers</a> |
+    <a href="chicken.html">Chicken</a> |
+    <a href="kebabs.html">Kebabs</a> |
+    <a href="kielbasa.html">Kielbasa</a> |
+    <a href="ribs.html">Ribs</a> |
+    <a href="steak.html">Steak</a>
+  </div>
+
+  <div class="bbq-content">
+
+    <!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
+    <div class="bbq-loading" style="display:none;">
+      <img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
+    </div>
+
+    <!-- This content will be shown if no path is specified in the URL fragment. -->
+    <div class="bbq-default bbq-item">
+      <img src="bbq.jpg" width="400" height="300">
+      <h1>jQuery BBQ</h1>
+      <p>Click a nav item above or below to load some delicious AJAX content! Also,
+        once the content loads, feel free to further explore our savory delights by
+        clicking any inline links you might see.</p>
+    </div>
+
+  </div>
+
+  <div class="bbq-nav bbq-nav-bottom">
+    <a href="burger.html">Burgers</a> |
+    <a href="chicken.html">Chicken</a> |
+    <a href="kebabs.html">Kebabs</a> |
+    <a href="kielbasa.html">Kielbasa</a> |
+    <a href="ribs.html">Ribs</a> |
+    <a href="steak.html">Steak</a>
+  </div>
+</div>
+
+<h3>The code</h3>
+
+<p>This example attempts to wrap up a pjax-style interaction as an add-on to jquery-bbq. After you've included the jquery.bbq.pjax.js file, implementing it is as simple as:</p>
+
+<pre class="brush:js">
+<?php print htmlspecialchars( $shell['script'] ); ?>
+</pre>
+
+<?php
+$shell['html_body'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// DRAW SHELL
+// ========================================================================== //
+
+draw_shell();
+
+?>
diff --git a/examples/fragment-pjax/kebabs.html b/examples/fragment-pjax/kebabs.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="kebabs.jpg" width="400" height="300">
+<h1>Savory Shish-Kebabs</h1>
+<p>Who doesn't like kebabs? Nobody! That's why this meat and veggie combo is sure
+to blow your mind! Still, if you aren't in the mood for wooden sticks, why not let a
+delicious <a href="burger.html">Burger</a> whet your appetite?</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/kebabs.jpg b/examples/fragment-pjax/kebabs.jpg
diff --git a/examples/fragment-pjax/kielbasa.html b/examples/fragment-pjax/kielbasa.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="kielbasa.jpg" width="400" height="300">
+<h1>Sweet Kielbasa</h1>
+<p>One bite of this kielbasa will have you asking for the recipe, and that's a fact.
+But save some room, because while you're here, you've got to check out our fantastic
+fall-off-the-bone <a href="ribs.html">Ribs</a>!</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/kielbasa.jpg b/examples/fragment-pjax/kielbasa.jpg
diff --git a/examples/fragment-pjax/ribs.html b/examples/fragment-pjax/ribs.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="ribs.jpg" width="400" height="300">
+<h1>Baby-Back Ribs</h1>
+<p>What's better than a half-rack of ribs? A full rack! And if you like ribs,
+which you do, you're sure to love our perfectly seared flame-broiled
+<a href="steak.html">Steak</a>!</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/ribs.jpg b/examples/fragment-pjax/ribs.jpg
diff --git a/examples/fragment-pjax/steak.html b/examples/fragment-pjax/steak.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Ben Alman &raquo; jQuery BBQ &raquo; Barbecue!</title>
+</head>
+<body>
+
+<img src="steak.jpg" width="400" height="300">
+<h1>Flame-Broiled Steak</h1>
+<p>Seasoned and cooked perfectly, this amazing steak aims to please! And if you
+have room left over, don't forget to help yourself to a plate of our sweet
+<a href="kielbasa.html">Kielbasa</a>!</p>
+
+</body>
+</html>
diff --git a/examples/fragment-pjax/steak.jpg b/examples/fragment-pjax/steak.jpg