firsties!

gseguin · Aug 24, 2011 · 1a64eba · 1a64eba
commit 1a64eba
Show file tree

Hide file tree

Showing 13 changed files with 434 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.project
+*~
+*.diff
+*.patch
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+jQuery Mobile Pagination Plugin
+=====
+A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard! 
+
+Simply add this plugin to your page and link together documents via ordinary HTML anchors. jQuery Mobile Pagination will enhance those links with touch-drag navigation in browsers that support touch events. 
+
+This is implemented on top of jQuery Mobile's Ajax Navigation Model, meaning this plugin ties into your browser's history, so back and forward buttons work as expected!</p>
+
+
+Demos and documentation
+===================================
+
+This plugin requires jQuery and jQuery Mobile. It doesn't require the whole framework though, we'll document that later!
+
+To use:
+
+1. Reference <code>jquery.mobile.pagination.css</code> and <code>jquery.mobile.pagination.js</code> from your page.
+2. Place the following markup somewhere inside each document that you want to make draggable. The links should point to the next and previous pages.
diff --git a/demo/2.html b/demo/2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQM Pagination Demo - 2</title>
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
+	<link rel="stylesheet" href="../jquery.mobile.pagination.css">
+	<link rel="stylesheet" href="demo.css">
+	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
+	<script src="../jquery.mobile.pagination.js"></script>
+</head>
+<body>
+	<img src="_img/2.jpg" alt="Wooden boat on a canal">	
+	<ul data-role="pagination">
+		<li class="ui-pagination-prev"><a href="index.html">Prev</a></li>
+		<li class="ui-pagination-next"><a href="3.html">Next</a></li>
+	</ul>
+</body>
+</html>
diff --git a/demo/3.html b/demo/3.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQM Pagination Demo - 3</title>
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
+	<link rel="stylesheet" href="../jquery.mobile.pagination.css">
+	<link rel="stylesheet" href="demo.css">
+	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
+	<script src="../jquery.mobile.pagination.js"></script>
+</head>
+<body>
+	<img src="_img/3.jpg" alt="A house on a canal in Amsterdam">	
+	<ul data-role="pagination">
+		<li class="ui-pagination-prev"><a href="2.html">Prev</a></li>
+		<li class="ui-pagination-next"><a href="4.html">Next</a></li>
+	</ul>
+</body>
+</html>
diff --git a/demo/4.html b/demo/4.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQM Pagination Demo - 4</title>
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
+	<link rel="stylesheet" href="../jquery.mobile.pagination.css">
+	<link rel="stylesheet" href="demo.css">
+	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
+	<script src="../jquery.mobile.pagination.js"></script>
+</head>
+<body>
+	<img src="_img/4.jpg" alt="A textured wall in Amsterdam">	
+	<ul data-role="pagination">
+		<li class="ui-pagination-prev"><a href="3.html">Prev</a></li>
+		<li class="ui-pagination-next"><a href="index.html">Next</a></li>
+	</ul>
+</body>
+</html>
diff --git a/demo/_img/1.jpg b/demo/_img/1.jpg
diff --git a/demo/_img/2.jpg b/demo/_img/2.jpg
diff --git a/demo/_img/3.jpg b/demo/_img/3.jpg
diff --git a/demo/_img/4.jpg b/demo/_img/4.jpg
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,7 @@
+body, .ui-page {
+	text-align: center;
+	background: #000;
+}
+img {
+	max-width: 100%;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQM Pagination Demo - 1</title>
+	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
+	<link rel="stylesheet" href="../jquery.mobile.pagination.css">
+	<link rel="stylesheet" href="demo.css">	
+	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+	<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
+	<script src="../jquery.mobile.pagination.js"></script>
+</head>
+<body>
+	<img src="_img/1.jpg" alt="Clog with flowers planted in it">	
+	<ul data-role="pagination">
+		<li class="ui-pagination-prev"><a href="4.html">Prev</a></li>
+		<li class="ui-pagination-next"><a href="2.html">Next</a></li>
+	</ul>
+</body>
+</html>
diff --git a/jquery.mobile.pagination.css b/jquery.mobile.pagination.css
@@ -0,0 +1,73 @@
+/*!
+* jQuery Mobile Framework : drag pagination plugin
+* Copyright (c) Filament Group, Inc
+* Authored by Scott Jehl, scott@filamentgroup.com
+* Dual licensed under the MIT or GPL Version 2 licenses.
+*/
+.ui-pagination {
+	left: 0;
+	width: 100%;
+}
+.ui-pagination, .ui-pagination li {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	top: 0;
+	position: fixed;
+}
+.ui-pagination li {
+	overflow: hidden;
+	width: 2.5em;
+	height: 4.5em;
+}
+.ui-pagination li a {
+	padding: .7em .4em .7em .45em;
+	opacity: .7;
+	position: absolute;
+	z-index: 999;
+}
+.ui-pagination .ui-pagination-prev {
+	left: 0;
+	top: 150px;
+}
+.ui-pagination .ui-pagination-next {
+	top: 150px;
+	right: 0;
+}
+.ui-pagination .ui-pagination-prev a {
+	right: 0;
+	padding-left: 1.45em;
+}
+.ui-pagination .ui-pagination-next a {
+	left: 0;
+	padding-right: 1.45em;
+}
+.ui-page.ui-page-prev {
+	left: -100%;
+	display: block;
+	overflow: visible;
+}
+.ui-page.ui-page-next {
+	left: 100%;
+	display: block;	
+	overflow: visible;
+}
+.ui-pagination-dragging,
+.ui-pagination-dragging .ui-page,
+.ui-pagination-snapping,
+.ui-pagination-snapping .ui-page {
+	width: 100%;
+}
+/* NOTE: comment this part out if your page is element-heavy!! */
+.ui-page * {
+	-webkit-transform: rotateY(0deg);
+	-moz-transform: rotateY(0deg);
+	transform: rotateY(0deg);
+}
+.ui-pagination-snapping .ui-page {
+	-webkit-transition: -webkit-transform .3s ease-out;
+	-moz-transition: -moz-transform .3s ease-out;
+	-ms-transition: -moz-transform .3s ease-out;
+	-o-transition: -o-transform .3s ease-out;
+	transition: transform .3s ease-out;
+}