Initial commit

README.mdown

@@ -0,0 +1,43 @@
+Navigationbar iOS style
+-----------------------
+
+Implements a navigationbar similiar to the one in iOS. This basic
+implementation is poorly styled. But it works.
+
+Makes use of the History API to enable back button. Forward button 
+intentionally left out since that's not how it works on the iPhone.
+
+*Works in WebKit only*
+
+# Usage
+## Initializing
+Include the javascript and css files. Init the navigation bar by calling:
+
+   `navigationbar.init('selector to container');`
+
+The navigation bar will empty and use the entire container it's given. If no
+default container is supplied it will use 'body'.
+
+## Pushing a new page onto the stack
+There are two ways to push a new page onto the stack. Either by using links
+or directly calling the navigation bar.
+
+   `// Pushing programmatically`
+   `navigationbar.pushPage('url to page', bool-animate);`
+   `// Passing true as the second argument will animate the new page into place`
+   `// Passing false will put it there as soon as it's loaded`
+
+Using links in your documents is as simple as giving the links the class
+*navbar-link*.
+
+   `<a href="page/to/load.html" class="navbar-link">Push page</a>`
+
+
+# Notes
+This is an early version and are probably riddled with bugs. Contributing will
+give you gold stars 'n stuff.
+
+The navigationbar will load the new page using AJAX. A loading indicator is in
+the code, but I deemed it useless, feel free to uncomment the beforeSend
+property of the AJAX-call in pushPage() if you want to use it. Graphics are
+dead ugly at the moment.

navigationbar.css

@@ -0,0 +1,150 @@
+.navbar-wrapper {
+  position: absolute;
+  }
+
+#navbar {
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bfbfbf), to(#eee));;
+  border-bottom: 1px solid #aaa;
+  height: 43px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  }
+
+  .navbar-title {
+    color: #1a1a1e;
+    font: bold 22px/43px Helvetica, Arial, sans-serif;
+    position: absolute;
+    text-align: center;
+    text-shadow: 1px 1px 0 #fff;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+    }
+
+  .navbar-back {
+    position: absolute;
+    z-index: 1;
+    }
+
+/**
+ * Loader
+ */
+.navbar-loader {
+  background: rgba(0, 0, 0, 0.4) url('loader.gif') center center no-repeat;
+  color: #efefef;
+  height: 40px;
+  margin: 40% auto 0 auto;
+  padding: 80px 0 0 0;
+  text-align: center;
+  width: 120px;
+  -webkit-border-radius: 10px;
+  }
+
+/**
+ * Page styles
+ */
+#navbar-container {
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 44px;
+  }
+
+   /* Old pages, stacked to the left of the screen */
+  #navbar-container li {
+    background: #999;
+    height: 100%;
+    left: -100%;
+    position: absolute;
+    width: 100%;
+    }
+
+  /* The currently active page, centered on screen */
+  #navbar-container li.navbar-active-page {
+    left: 0;
+    }
+
+  /* A new, loading page, positioned to the right of the screen */
+  #navbar-container li.navbar-new-page {
+    left: 100%;
+    }
+
+/**
+ * Animation properties
+ */
+.navbar-animated {
+  -webkit-transition: all .4s ease-out;
+  }
+
+
+/**
+ * Buttons inspired by: CSS3 buttons on GitHub..
+ */
+button.navbar-back-new {
+  position: absolute;
+  left: -100%;
+  }
+
+button.navbar-back {
+  position: absolute;
+  left: 0;
+  }
+
+button.navbar-back,
+button.navbar-back-new {
+  background: #e3e3e3;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 0 1px 1px #f6f6f6;
+  color: #333;
+  font: bold 10px "helvetica neue", helvetica, arial, sans-serif;
+  line-height: 1;
+  margin: 7px 0 0 5px;
+  padding: 8px 5px 9px 15px;
+  text-align: center;
+  text-shadow: 0 1px 0px #fff;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
+
+}
+
+button.navbar-back:active {
+  background: #aaa;
+  -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
+  -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
+  box-shadow: inset 0 0 1px 1px #e3e3e3;
+  color: #000;
+}
+
+button.navbar-utility-new { opacity: 0; }
+
+button.navbar-utility,
+button.navbar-utility-new {
+  background: #e3e3e3;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 0 1px 1px #f6f6f6;
+  color: #333;
+  font: bold 10px "helvetica neue", helvetica, arial, sans-serif;
+  line-height: 1;
+  margin: 7px 5px 0 0;
+  padding: 8px 5px 9px 5px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-shadow: 0 1px 0px #fff;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
+
+}
+
+button.navbar-utility:active {
+  background: #aaa;
+  -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
+  -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
+  box-shadow: inset 0 0 1px 1px #e3e3e3;
+  color: #000;
+}