andyMatthews.net
Add a Twitter for iPhone Style Swipe Menu to jQuery Mobile
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.