Git Product home page Git Product logo

jqm-pagination's Introduction

โš ๏ธ This project is archived and the repository is no longer maintained.

jQuery Mobile Pagination Plugin

Filament Group

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!

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 jquery.mobile.pagination.css and jquery.mobile.pagination.js 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.

Markup:

<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>

jqm-pagination's People

Contributors

agcolom avatar ddaviesbrackett avatar jefflembeck avatar johnbender avatar scottjehl avatar toddparker avatar zachleat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jqm-pagination's Issues

TypeError: options is undefined

After i updated jquery mobile to the latest version 1.3.1 the pagination won't work. Firebug shows "TypeError: options is undefined"

Disable swipe on last page

Thanks very much for this plugin. Works great. Is there a way to prevent the page drag on the final page of a site? Currently when you get to the last page it is still possible to swipe/drag left which reloads the page. I have removed the

  • item from the the pagination ul.

    Any help would be much appreciated.

  • prefetching pages should be a configurable option

    The prefetching of pages in this plugin bypasses the pagebeforechange event, which is crucial for dynamically creating pages. Such pages a very useful in combination with the slideshow-like interface of your plugin.

    A data attribute or an exposed default would be great. I commented out the pageshow handler so it would work for me.

    Swipe issues when having all pages inside a single html document

    The demo you have works perfectly. However, if I put everything in a single html document with several jqm pages, there is a problem when swiping. Using the arrows to move forward is no problem at all, all works fine. There are however two issues with the swipe:

    • if you press the arrows to go through all the pages, and then swipe backwards, there is no problem, works fine.
    • if you press the arrows to go through all the pages, and then swipe forward, the page will display, but there is a blink effect.

    Now reload the 1st fist page.

    • if you swipe backwards to a page you have not been before (i.e. you are on page one, and you swipe back), the page will display, but then the app behaves strangely. You can't swipe back or forwards, and even the buttons do not always work.
    • if you swipe forwards to a page you have not been before (i.e. you are on page one, and you swipe forward to page two), you will get the "blink" effect and get a black page.

    I have prepared a page to illustrate this: your pagination demo with everything in one document:
    http://users.cscs.wmin.ac.uk/~coloma/jqm/xml2jqm-pagination/demo/testpagination.html

    This could actually be linked to issue #5

    Pagination in jquerymobile is not working as expected

    Hi...
    i am new to jquery and their plugins...and also creating issue first time...for any mistakes please help me to improve...

    I am using jquerymobile for my website. in my website there is a search field which results lots of records so i wants to use pagination to show my results...
    i used JQuery Mobile Pagination Plugin from the site http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/.
    But its not working as expected.

    In android browser. it stop dragging after two pages..and in opera browser when i ran the code browser hangs...
    i am not able to catch whether problem is with my code or there is any plugin support problem with these browser...
    please help me...to understand this. if you already used this plugin.

    Any help would be much appreciated.

    Embedded Photo Slider

    I'm looking to embed this functionality in a specific part of the page (ie a sliding banner image) where the images are set to max-width: 100%; instead of having it be the full page, as illustrated in your demo. Can it work this way or does it always have to be a full page? Also, is there a way to just use img tags in the mark-up or does it always need to grab a new html?

    webkitTransitionEnd does not fire

    I had commented out the last two CSS lines as per your note in pagination.css on element-heavy pages.

    However, if I comment out this:

    .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;
      }
    

    the webKitTransitionEnd event does not fire anymore on my page , thus doneCB does not get called here:

     $page.one( "webkitTransitionEnd oTransitionEnd transitionend", doneCB );
    

    and the plugin "breaks" on my iPad after swiping through all pages once.

    The two arrows

    Hi,

    Can I use this pagination without the two arrows on the page?
    When I use it on the mobile phone, I want to take off the two arrows.

    Cheers.:)

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.