andyMatthews.net

Adding iPhone style swipe to delete button to a listview component in jQuery Mobile

Update: I've released a jQuery plugin called swipeButton which you can simply drop into your project.

While developing the mobile website over at Goba.mobi this week I decided that I wanted to add a little flair and drop in a "swipe" menu allowing users quick access to actions that they would normally have to view the details page to use. Luckily jQuery Mobile makes it easy...so with just a little CSS, a little JavaScript, and some built-in events I made it happen; in just one day. Here's how I did it.

If you'd like to see this code in action, check out the demo. The original concept was to allow a user to cancel an event that they had created. The appearance would be similar to the iPhone's standard swipe to show a cancel button action pictured here.

Here's the listview code, note that the button itself isn't hardcoded. Because the swipe action isn't something that older devices can recreate I felt safe in making this a pure JavaScript/CSS solution.

I'm tying into jQuery Mobile's pageshow event. This fires when each new page is loaded, and ready to display. Because I'm only adding this behavior to certain pages in my app, I'm also going to check the target id. This id is found at the root of every jQuery Mobile page. In the example above, the id is "swipedelete". The code below is commented, but I'll point out a few things of note. It might seem like a duplicate, but $('.aDeleteBtn').remove(); should actually be in there twice. Once when this "page" gets focus, and again, when someone swipes to the right.

The final piece we need is the CSS. jQuery Mobile makes great use of themes, but they don't have a red theme yet. So I modified one of their built in themes to allow for the red "delete" button we're looking for.

I'll be writing a tutorial on theming jQuery Mobile in the coming weeks, but for now you just need a few tidbits. jQuery Mobile is built around single letter themes. Currently they run from a-e. Every class in the jQM repertoire is built around the .ui prefix. Everything else spreads out from there. To add, or change the theme on any element, simply add the appropriate class, and change the letter on the end until it looks like you want. If it doesn't then check back for my theming tutorial to get it looking spot on!

I hope that this swipe to delete tutorial helps you out. Remember that you can take a look at the finished product if you like. In the next few days I'll be writing a second part to this article showing you how to create an entire "swipe menu" like one found in Twitter for iPhone.

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

The more I see the more excited I get about jQuery Mobile. :) Thanks.

Ryan - February 19, 2011 06:22 am

Nice! I've been really impressed with jQuery mobile so far.

Tyson Cadenhead - February 19, 2011 07:23 am

Very fancy. I am really liking how much you can do with jQuery mobile.

Dave - February 21, 2011 09:43 am

Very cool. Looks you have a small typo in your code though: $('div'.live('pgaeshow',function(event,ui){

Raymond Camden - February 21, 2011 12:14 pm

Uhh...what typo? :D

Thanks for pointing that out Ray. Appreciated.

andy matthews - February 21, 2011 12:29 pm

Thanks for the post, it gave me some insight on how people add custom features (like swiping) to jquery mobile. Keep up the great work!

Clayton - March 30, 2011 02:12 pm

My pleasure Clayton. Glad you liked it.

andy matthews - March 30, 2011 03:37 pm

should $li.prepend($aDeleteBtn); actually be $li.prepend($deleteBtn); .aDeleteBtn is the class not the variable or am I missing something?

Andy W - April 26, 2011 05:19 pm

Andy W. You are absolutely correct. There was actually another error in this code that I just noticed as well. I've fixed both of them. Apologies.

andy matthews - April 26, 2011 07:03 pm

Fantastic!

Joel - May 11, 2011 01:40 pm

pretty cool. Obviously not 'exactly' like the iphone feature, but a good start anyway. I am absolutely addicted to jquery mobile right now.

Pavlicko - June 14, 2011 06:35 pm

why do you need this line if ( event.target.id.indexOf('swipedelete') >= 0) {... } ?

erez - August 18, 2011 06:03 am

erez... If you look at the first code block you'll see that the div has an id of swipeDelete. The line of code you're asking about allows me to put code into my app that only runs when certain pages are loaded. In this case, the JavaScript above would only run when the page with an id of swipeDelete is loaded.

andy matthews - August 18, 2011 08:04 pm

you have shared nice article with code. it will really help me. thanks for this informative post.

James Hobson - September 15, 2011 03:43 am

ops! my chrome says:'event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future. ' can u explain it? also the code did not work, the same condition as swipeMenu .... thank you

Wiiking Zhang - December 06, 2011 12:00 am

Wiiking, does the demo work for you?

http://andymatthews.net/code/jquerymobile/#swipe-delete.html

andy matthews - December 06, 2011 10:44 am

Funny how it doesnt work in IE9. Typical rookie mistake.

Genzero - December 08, 2011 01:16 pm

That's a considerate comment Genzero, thanks for that insightful feedback. More likely it doesn't work in IE9 because jQuery Mobile was in alpha when I wrote this widget. That was 5 versions back with many changes since then. I'm actually surprised that it still works at all. Regardless, I'm in the process of rewriting this as a plugin that will be featured on the jQuery Mobile website.

andy matthews - December 08, 2011 02:03 pm

yep it works,but still warnning that. That's not a big problem. I'm glad to learn lots of things about jQM here, thanks ,â??(^o^)â?? keep on going!!

Wiiking Zhang - December 08, 2011 08:48 pm

Hi Andy - this looks promising! I noticed the Swipe gesture works well on iOS 5.x as long as you swipe from left to right, but a right-to-left swipe does not display the Delete button. Thoughts? Thanks for the gret work!

Robogizmo - December 14, 2011 08:35 am

Robogizmo, thanks for the kind words. The reason it doesn't work right to left is that I'm only binding the swiperight event as you can see in this line:

$('ul li').bind('swiperight', function(e){

If you'd like the same functionality on right or left swipe then you can easily add swipeleft like so:

$('ul li').bind('swiperight swipeleft', function(e){

You could even add different functionality in the swipe left and right behaviours.

andy matthews - December 14, 2011 10:19 am

Ah, so. Thanks!

Robogizmo - December 15, 2011 11:51 am

Have you figured out how to actually make taping the delete button to work instead of the list item tap being triggered?

Brian - December 28, 2011 12:38 pm

Hi, I was amazed at how easy it looked when you explained away the code & what it all did & i thought it didn't look that hard! However, i just can't reproduce it locally. I've taken what you've got in the snippets & plugged them in & it just wont run. When I run the code, it says that it expects token ')' at line 43 in the js...this is also in eclipse at design time. Any chance of any help? Thanks Mark

Mark Kelsall - January 05, 2012 03:38 pm

Mark...first thing to check, does the demo work for you? If it does, then compare the code in the demo, to the code on your local machine. It's probably something simple missing.

andy matthews - January 05, 2012 07:03 pm

@Mark: There is a mistake in the code. Add in the last line between } and ; a ). Then it works fine.

Fabian - January 08, 2012 02:45 pm

Andy, I added the curly bracket. Didn't quite work as expected, here's a weird one for you to figure out. If i jump straight to the page http://www.andymatthews.net/code/jquerymobile/swipe-delete.html (notice without the hash & in a new window) then it won't work (please try this yourself to see what results you get because i'm eager to understand) if you then click on one of the links in the list which navigates you to the next page & then click back (of any form, the browser window or the button in the header) & try to do a swipe on the list, it works! I'd need to see what effect this has on a bigger website for example, whether it was a navigation thing in JQM or what. Thanks Mark

Mark Kelsall - January 09, 2012 01:13 pm

Hi there, the demo looks really good, but i can't get it to work local. I've copied all the code first, no sucess. Then copied the sources form the demo, but it doen't work. Can you please help me, it wood look so nice in my project. Thx Nils

Nils - January 12, 2012 10:35 am

Nils and Mark...I'm in the process of rewriting this piece as a standalone plugin for jQuery Mobile. Hopefully I can get it done in a few weeks. When I do I'll post here so that you both get notification of it.

andy matthews - January 12, 2012 07:07 pm

Hi Andy can i have swiping between div tags and please mail it to me.. Thanks Akshay

akshay - February 04, 2012 09:50 am

Akshay...can you be a little more clear as to what you're asking?

andy matthews - February 07, 2012 05:53 am

Hi i have multiple html files and m doing swiping(finger swipe) between html files those deployed in mobile and now i want Div blocks swiping..means swiping between two Div tags..can you help in this........? Thanks Akshay

Akshay - February 07, 2012 06:50 am

m using mobile jquery..

Akshay - February 07, 2012 06:51 am

I made it a bit sexier by adding some fading animation :-) for those interested // insert swipe div into list item $li.fadeOut(150, function() { // Animation complete. $li.prepend($deleteBtn); }); $li.fadeIn(150); });

hi andy, i need code for swipe to delete left to right and right to left. please send a mail to me

rajesh sreedhara - February 16, 2012 11:12 pm

@rajesh Andy has a consulting link on the left. I am pretty sure he'd be willing to take you on as a client.

Mark Fuqua - February 19, 2012 01:23 pm

more swipe on the same element show more button because?

salvo - March 01, 2012 01:49 am

Salvo... I took another look at the demo and I don't see that it's duplicating the delete button. Can you show me an example?

andy matthews - March 01, 2012 03:15 pm

Nice post. The click event of the list item is still fired though (in your demo you are redirected away from the list)

Bid Wheel - March 07, 2012 04:39 am

For those of you interested in this tutorial, I've released an actual jQuery plugin for this concept. Find out more about swipeButton, or download it

andy matthews - March 07, 2012 05:10 am

Thanks, I will wait for the manual promised!

Bernard - March 26, 2012 05:32 am

Hi Andy!

Nice stuff.
How can I make it work on a Split Button List?

Ecil Teodoro - May 10, 2012 04:10 pm

Ecil...

I haven't tried it on a split button list so I'm not sure if it will work. First thing I'd try though is to use my swipeButton plugin. It's more up to date and has better functionality.

andy matthews - May 10, 2012 07:39 pm

Very Nice and Good one thank u for sharing this awesome jquery code.

Davidwarner - August 08, 2012 03:21 am

cool post thanks

Michael - November 12, 2012 04:57 am

Hey Andy,

I was looking for these only. I was searching something better way to have a good UI Kit with the PSD so that we can easy to design the UI element.

Regard,
M Whisely

Martin Whisely - January 31, 2013 04:17 am

Hey Andy,
This looks really cool, though I would love to change color, and design to suit my web design. Do you think I can make it work work with .net so that data is altered on the server as well. So when I delete a content from here it is deleted from the Db too.

Thanks
Nancy

Nancy Sen - February 05, 2013 04:34 am

Nancy...

That's the whole point! :D

There's a click method in which you define what happens when someone clicks one of the buttons. Just add an AJAX call to your server to delete the item swiped upon and you should be good. As far as the styling, that's just CSS.

andy matthews - February 06, 2013 06:10 am

When is Div 'swipedelete' added into the page

jack - March 20, 2013 03:07 am

Adding iPhone style swipe to delete button to a listview component in jQuery Mobile

Related Posts