Simple Mobile UI Patterns: Page Swipe with Zepto.js and PhoneGap

As I’m working on improving the user experience of some of my recent mobile appliations, I thought it could be useful to start documenting some basic UI patterns for mobile apps.

The goal is not to provide yet another UI framework, but rather to document the basic/raw approach (or different approaches) to implement a specific UI pattern using HTML, CSS, and JavaScript. The code is intentionally simplistic so that it can easily be integrated in your own libraries using your own conventions.

I created a GitHub repository called “mobile-ui-patterns” where I’ll try to publish the patterns I come across in the apps I’m building.

I just pushed a first example of the “Page Swipe” pattern that is pretty common in tablet layouts.

Watch a short video here:

In this implementation, I used the swipe gesture event available in Zepto.js (a lighter weight jQuery compatible DOM library).

In my next post, I will share another version of the same pattern implemented with iScroll and its “snap” feature that provides a slightly different user experience.

12 Responses to Simple Mobile UI Patterns: Page Swipe with Zepto.js and PhoneGap

  1. Juri July 24, 2012 at 3:04 pm #

    I thought about trying this
    http://lagoscript.org/jquery/flickable/demo
    together with jQuery Mobile.

  2. Lokasyon bazlı indirim July 31, 2012 at 10:37 am #

    very usefull, thanks.

  3. mfkrh August 1, 2012 at 4:51 am #

    very usefull, thanks.

  4. Shycon August 6, 2012 at 11:04 pm #

    Very cool! I like it! I’ve done swipe pages before but never without the animation, nor up/down

  5. ajay October 31, 2012 at 6:03 am #

    Very nice.
    Thanks for posting

  6. sohbet odalari December 21, 2012 at 12:01 am #

    hank you. very helpful code. this code more useful that before :)

  7. Inspired UI February 16, 2013 at 12:28 pm #

    Hi! You need to try one of the most popular collection http://inspired-ui.com with lots of beautiful and really great UI patterns.

  8. bobby June 7, 2013 at 9:56 am #

    well done but if you change the screen resolution or flip the screen between portrait and landscape the viewport fails.

  9. Tarif July 25, 2013 at 9:58 am #

    very very usefull, thank you.

  10. Ivan de la Jara April 12, 2014 at 12:48 pm #

    Whats the faster from both?

Trackbacks/Pingbacks

  1. Simple Mobile UI Patterns: Page Swipe with iScroll and PhoneGap - July 18, 2012

    [...] the Zepto.js swipe event version, here is another implementation of the “Page Swipe” UI pattern. This version is [...]

  2. PhoneGap Community Roundup – July 2012 | SDK News - August 12, 2012

    [...] Simple Mobile UI Patterns: Page Swipe with Zepto.js and PhoneGap by Christophe Coenraets [...]

Leave a Reply