Add a Twitter for iPhone Style Swipe Menu to jQuery Mobile

Filed under: jQuery Mobile

comments (9) Views: 20,272 Clip to Evernote

In my recent blog post on adding iPhone style swipe to delete button in jQuery Mobile I promised that I'd give you a part two, adding an entire "swipe menu". Well, here it is. Here's a screenshot of what we'll be building. Note that we're using plain text buttons instead of icons, but you can modify this to your heart's content. We're using this same setup in several areas of the Goba.mobi mobile website. If you'd like to see this code in action, check out the demo

Here's the listview code. Again, it's just plain HTML. To spice things up a little I added a second row of text. Can you handle the excitement?

The basic JavaScript code is the same, with a few minor exceptions. I won't cover the same pieces again, just focusing on the new ones.

I found that somehow jQuery Mobile was assigning the swiperight event twice, so I'm explicitly removing the swiperight event before binding it again. In this case, we're inserting the buttons into the menu node, then inserting the menu node into the list element. To add a little extra flair I'm animating the menu in from the left (following the slide of the finger). Finally I wanted a way to close the menu so that I could get to the element beneath it. I assign an event to the body of the page so that I can "click away" from the menu and have it close.

Lastly the CSS for the menu, and a generic button definition to give it the size and position I wanted.

And that's it. Take a look at the finished product on your smart phone to see it in action. I hope you've enjoyed this tutorial and can put the contents to good use on your jQuery Mobile powered website.

Amazon logo

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

Related Posts


I think you forgot to escape the code in the first code block.

Raymond Camden - February 24, 2011 01:21 pm

Thanks Ray. I sure did. What a pain it is to remember that I can't edit the post without repasting the post body. Add that to the list of things that I need to fix in this blog software.

andy matthews - February 24, 2011 05:38 pm

First time I saw swipe to delete was on WebOS, pretty neat to stumble upon your example. Thanks for sharing.

Alex - November 20, 2011 09:12 pm

great site

Reddy Prasad - February 01, 2012 07:11 am

The finish product webpage doesn't work :(

Carlos - February 13, 2012 02:37 am

Thanks alot,
I tried to copy these snippets to my page but nothing happens.
Is there any extra code I need to add.

Thanks.

Hady - March 18, 2012 01:44 pm

Hady...

This code probably doesn't work as well is it could. This was written over a year ago and jQuery Mobile has changed quite a bit since then.

I plan on changing up this code and releasing it as a plugin soon.

andy matthews - March 18, 2012 01:58 pm

Do you have a link to those images at the top. The icons in the screenshot of a twitter app? Those icons looks really nice!

Mike - March 26, 2012 05:03 pm

Mike...those are the icons that used to be found within the official Twitter for iPhone app. They're not using them any more...but you can find a nice collection of icons inside Font Awesome.

andy matthews - March 27, 2012 05:26 am