Add a Twitter for iPhone Style Swipe Menu to jQuery Mobile

Filed under: jQuery Mobile

comments (13) Views: 44,883

This article is over a year old and has not been updated. Your results may vary.

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

Regarding your previous comment, what is it about the code that doesn't work as well as it could. Curious since I may want to use it in production.

Sze - June 12, 2012 11:07 am

Hi Andy,

I have just started with Jqurey Mobile. And I tried to use your Swipe button control for my dynamically generated list.
But hard luck, I failed.

In my scenario, I have a div with Id=showlist.
And at document.load even I am fetching a list of data from SQL database and creating a List with all the attributes add (which is mention in your post). And then calling below function as suggested in your post.

pranay - July 12, 2012 11:48 pm

Pranay...

I haven't specifically tried swipe button with a dynamic list but there's no reason it shouldn't work. Have you confirmed that all of the attributes are being applied?

andy matthews - July 13, 2012 06:22 am

Hi Andy,

I have checked for applied style. at div level every style is applied. But at list level (

  • ) no style is applied.
    I think u need to check for dynamic list.
    Meanwhile, I have changed my approach of using Swipe Menu and shifted implementation towards Drilldown menu. and it's working great with Drill down menu.

    But I will love to see some example from your side for implementation of Swipe Menu with dynamically created pages/List.

    Thanks,
    Pranay

    pranay - July 15, 2012 10:23 pm