Permalink
Browse files

firsties!

  • Loading branch information...
scottjehl
scottjehl committed Aug 24, 2011
0 parents commit 1a64ebacbc4004e35b8090321832c82025576815
@@ -0,0 +1,5 @@
+.project
+*~
+*.diff
+*.patch
+.DS_Store
@@ -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.
@@ -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>
@@ -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>
@@ -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>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,7 @@
+body, .ui-page {
+ text-align: center;
+ background: #000;
+}
+img {
+ max-width: 100%;
+}
@@ -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>
@@ -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;
+}
Oops, something went wrong.

0 comments on commit 1a64eba

Please sign in to comment.