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.

  • Pingback: Simple Mobile UI Patterns: Page Swipe with iScroll and PhoneGap()

  • I thought about trying this
    together with jQuery Mobile.

  • very usefull, thanks.

  • very usefull, thanks.

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

  • Pingback: PhoneGap Community Roundup – July 2012 | SDK News()

  • ajay

    Very nice.
    Thanks for posting

    • DON

      I have

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

  • Hi! You need to try one of the most popular collection with lots of beautiful and really great UI patterns.

  • bobby

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

  • very very usefull, thank you.

  • Whats the faster from both?

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

    Anybody experiencing above issue?

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

  • super lo

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

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