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.

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

    • DON April 7, 2015 at 7:02 am #

      I have

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

  11. Vijay May 19, 2014 at 9:54 am #

    This very same example does not work with swipe events in Android browser, works pretty much fine on iOS devices

    Anybody experiencing above issue?

  12. Andrew March 9, 2015 at 10:31 am #

    Android needs an e.preventDefault() somewhere to make these events work, but none of the Zepto developers ever tested it on an Android phone it seems.

  13. sohbet May 21, 2015 at 11:51 pm #

    super lo

  14. antrenman malzemeleri November 19, 2015 at 5:37 am #

    качество, надежность, экономичность и связанные работы выполняются imalattan.profesyonel команду.

  15. forma imalatı November 19, 2015 at 5:39 am #

    Ткани, которые мы используем в нашей форме; Первый класс микро-блокировки; Flex-форме, антибактериальный, имеет термо-баланс, и сразу же сушки. Это дает вам свободу, чтобы переместить трикотажные изделия футбола в матче; Он предназначен стильный достаточно, чтобы носить на ежедневной основе. Наши модели выпускаются в двух типах, как мои специальных трикотажных изделий и другой цифровой распечатать.
      Его высокая производство нашей компании, мы используем спортивные носки продукты: хлопок, хлопок, полиэстер, нейлон и лайкра. Она включает в себя антибактериальные


  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