Permalink
Browse files

firsties!

  • Loading branch information...
0 parents commit 1a64ebacbc4004e35b8090321832c82025576815 scottjehl committed Aug 24, 2011
@@ -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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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. Retry.

0 comments on commit 1a64eba

Please sign in to comment.