Permalink
Browse files

Re-add examples

  • Loading branch information...
1 parent 6c55f0d commit 3e20486ee4e50c386948a191eb76cd6b36ab820e @imakewebthings imakewebthings committed Feb 23, 2012
View
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>StackView Basic</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+</head>
+
+<body>
+
+<div id="basic-stack"></div>
+
+<script type="text/javascript">
+ $(function () {
+ var data =
+ {"start": "-1", "limit": "0", "num_found": "2", "docs":
+ [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+ };
+
+ $('#basic-stack').stackView({data: data});
+ });
+</script>
+
+</body>
+</html>
View
@@ -0,0 +1,270 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+<title>Stack View Documentation</title>
+
+<link rel="icon" href="favicon.ico" type="image/x-icon" />
+
+<!-- CSS just for this page -->
+<style type="text/css">
+h1, h2 {
+ margin: 5px 5px 10px 5px;
+ padding: 0;
+ color:#444;
+ font-weight:normal;
+}
+
+h3 {
+ margin: 10px 5px 0px 5px;
+ padding:0;
+ color:#444;
+ font-size:.9em;
+ font-weight:bold;
+}
+
+body {
+ font-family:'Helvetica', 'Arial', sans-serif;
+ background:#faf5f0;
+ min-width:845px;
+ max-width:1145px;
+ font-size: 1.1em;
+ color: #333333;
+ border: none;
+ line-height:normal;
+ margin:0px auto;
+}
+
+p {
+ margin: 5px 5px 15px 5px;
+ font-size: .8em;
+ line-height: 1.2em;
+}
+
+a {
+ color: #09F;
+ text-decoration: none;
+}
+
+.container {
+ float:left;
+ width:45%;
+ margin:15px 15px 15px 5px;
+ clear:both;
+}
+
+.explanation {
+ float:left;
+ width:48%;
+ margin:15px 15px 15px 25px;
+}
+
+.requirements {
+ float:left;
+ margin:15px 15px 15px 15px;
+ clear:both;
+}
+
+#doc-nav {
+ clear:both;
+ margin-left: 5px;
+ float:left;
+ width:23%;
+}
+
+#doc-nav ul{
+ list-style-type:none;
+ padding:0 10px 0 0;
+}
+
+#docs {
+ float:left;
+ width:70%;
+}
+
+#docs li {
+ font-size: .8em;
+}
+
+h1 {
+ font-size:2.1em;
+ padding-top:9px;
+}
+
+h2 {
+ font-size:1.2em;
+ color:#F60;
+}
+
+pre {
+ background-color: #fff;
+}
+
+#nav {
+ padding:0 150px 0 0;
+ margin:0;
+ list-style-type:none;
+ float:right;
+}
+
+#nav li {
+ display:block;
+ float:left;
+ padding:0 30px 0 0;
+}
+
+#nav li a {
+ display:block;
+ padding:25px 0 0 0;
+}
+
+.footer {
+ clear:both;
+ font-size:.7em;
+ float:right;
+ padding:25px 30px 25px 0;
+}
+</style>
+
+<!-- stackview.css to style the stack -->
+<link rel="stylesheet" href="../lib/jquery.stackview.css" type="text/css" />
+
+<!-- stackview.js and all js dependencies -->
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+<script type="text/javascript" src="../lib/jquery.stackview.min.js"></script>
+
+</head>
+
+<body>
+ <ul id="nav">
+ <li><a href="index.html">About</a></li>
+ <li><a href="documentation.html">Documentation</a></li>
+ <li><a href="examples.html">Examples</a></li>
+ <a href="http://www.librarylab.law.harvard.edu/"><img src="liblabstamp.png"></a>
+ </ul>
+ <a href="https://github.com/harvard-lil/stackview"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
+ <h1>Stack View Documentation</h1>
+
+ <div id="docs">
+ <div class="requirements">
+ <h2>Requirements</h2>
+ <p>Stack View requires <a href="http://jquery.com/">jQuery</a> and two additional plugins to enable further functionality. These plugins are bundled with jquery.stackview.min.js and do not need to be included separately.</p>
+ <ul>
+ <li>The <a href="http://brandonaaron.net/code/mousewheel/docs">mousewheel plugin</a> adds mouse wheel support to stack scrolling.</li>
+ <li>The infiniteScroller plugin enables on-call dynamic loading of new books.</li>
+ </ul>
+ <p>A small set of images is also necessary for drawing the stack. They can be found in the lib/images directory.</p>
+
+ <h2>How to Use</h2>
+ <p>You can start by looking at the most <a href="basic.html">basic demo</a>.</p>
+ <p>After including the required files, place a div in your html code where you would like Stack View to appear.</p>
+ <pre class="code language-html">
+ &lt;div id="stackview"&gt;&lt;/div&gt;
+ </pre>
+ <p>In your javascript, create some data for Stack View to use.</p>
+ <pre class="code language-javascript">
+var data = {
+ "start": "-1", // -1 start value signifies the end of a stack
+ "limit": "0",
+ "num_found": "2",
+ "docs": [
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ },
+ {
+ "title": "Persepolis",
+ "creator": [
+ "Marjane Satrapi"
+ ],
+ "measurement_page_numeric": 153,
+ "measurement_height_numeric": 24,
+ "shelfrank": 64,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009098946"
+ }
+ ]
+};
+ </pre>
+ <p>Then call the Stack View plugin using a jQuery selector.</p>
+ <pre class="code language-javascript">
+ $('#stackview').stackView({data: data});
+ </pre>
+ <p>Alternately, you can give Stack View a url. The url should point to a JSON file with data formatted as above or a script that accepts a callback and a start parameter and returns a JSON object. A script is useful for continually feeding Stack View new data as the user scrolls. Basically Stack View's version of paging.</p>
+ <pre class="code language-javascript">
+ $('#stackview').stackView({url: 'data.php'});
+ </pre>
+ <p>This is the most basic example using PHP.
+ <pre class="code language-php">
+ $start = $_GET['start'];
+
+ $docs = '[
+ {
+ "title": "Blankets",
+ "creator": [
+ "Craig Thompson"
+ ],
+ "measurement_page_numeric": 582,
+ "measurement_height_numeric": 25,
+ "shelfrank": 13,
+ "pub_date": "2003",
+ "link": "http://holliscatalog.harvard.edu/?itemid=|library/m/aleph|009189638"
+ }
+ ]';
+
+ if($start > 0) {
+ echo "{'start': '-1', 'num_found': '0', 'limit': '0', 'docs': ''}";
+ }
+ else {
+ echo "{'start': '0', 'limit': '0', 'num_found': '1', 'docs': $docs}";
+ }
+ </pre>
+ <h2>Available Stack View Options</h2>
+ <h3>data</h3>
+ <p>A JSON object used to construct a static stack. Stack View requires either a <b>data</b> object or a <b>url</b>, but not both.</p>
+ <h3>url</h3>
+ <p>The URL should point to a JSON file or a script that accepts a callback and start parameter and then provides Stack View with JSON formatted data. Stack View requires either a <b>data</b> object or a <b>url</b>, but not both.</p>
+ <h3>jsonp</h3>
+ <p>This option, when set to true, tells Stack View to send a JSONP request to the <b>url</b> specified. If using JSONP, make sure that the specified <b>url</b> accepts a callback and includes that callback as part of the JSONP response.
+ <br />Default is false.</p>
+ <h3>books_per_page</h3>
+ <p>How many books will be requested.
+ <br />Default is 10.</p>
+ <h3>threshold</h3>
+ <p>How much screen space to fill with books.
+ <br />Default is 1000.</p>
+ <h3>page_multiple</h3>
+ <p>Pixels per page.
+ <br />Default is 0.11.</p>
+ <h3>height_multiple</h3>
+ <p>Pixels per centimeter.
+ <br />Default is 12.</p>
+ <h3>search_type</h3>
+ <p>The type of search that the script from your url parameter should perform if a search is necessary.
+ <br />Default is keyword.</p>
+ <h3>query</h3>
+ <p>The query that the script from your url should use if performing a search.
+ <br />Default is nothing.<p>
+ <h3>ribbon</h3>
+ <p>The text that will appear in the ribbon at the top of the stack.
+ <br />Default is Stack View.</p>
+ </div>
+ </div>
+ <div class="footer">
+ <a href="http://www.librarylab.law.harvard.edu/">The Harvard Library Innovation Lab</a>
+ </div>
+
+<!-- js just for this page -->
+<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
+<script type="text/javascript">$.SyntaxHighlighter.init();</script>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 3e20486

Please sign in to comment.