swipeButton jQuery Mobile plugin launches. Millions rejoice!

Filed under: jQuery Mobile, swipeButton

comments (19) Views: 8,561 Clip to Evernote

I'm celebrating the one year anniversary of my original swipe to delete blog post by finally releasing this code as a proper jQuery Mobile plugin. The SwipeButton.js plugin allows jQuery Mobile developers to easily add iPhone style swipe to delete functionality to the listviews in their apps.

Clone the git repo - `git clone git@github.com:commadelimited/jquery.swipeButton.js.git` - or download it.

Check out a demo of swipeButton.

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!

Hope you guys like it. I enjoyed writing it

andy matthews - February 19, 2012 03:44 pm

can you link to a quicky jing so we can see it in action? :)

doug boude - February 20, 2012 07:41 am

Hey Andy I modified your from a while back to accept swipe to toggle the button display. The swipe left / right to hide / show caused usability issues when I tested on a device and an actual user.

Sidney - February 20, 2012 11:04 am

Sidney...this is a totally new plugin. The old version was hardcoding and injecting HTML into the listview row, this one inserts a single anchor tag and initializes it using the jQuery Mobile authorized trigger method.

andy matthews - February 20, 2012 08:54 pm

Thanks Andy, and I love to see a big coders smile under a brilliant genius's beard, who coded this with love and shares it all with us ... Hip hip hooray... Thanks again my friend! Take care and Namasté

André - February 29, 2012 10:31 am

Andy - know what I would like to see? The little red circle icon on the left like most iOS apps have, and you tap it, it rotates 90 degree counter clockwise, then the delete button appears.

Rob - March 01, 2012 05:53 pm

thanx very much!!!!!!

Nils - March 05, 2012 02:28 pm

That's really cool thanks. Though the css does change the value to the default css for all buttons in lists. To avoid that problem I just added "#swipeMe" before each attributes in your css so that it would stick to the elements inside my list with id="swipeMe" Cheers !

Jojo - March 07, 2012 08:23 am

I agree with Rob, Some functionality like that would be cool. I also wonder if it would be possible to trigger all items in the view to show the delete button. E.g. using an iOS like edit button in the header triggering this.

Marcel Overdijk - March 10, 2012 01:27 pm

Marcel... That would be easy. There's a single line of code in the plugin which prevents more than one button from being displayed at a time:

$('div.ui-btn, .' + o.btnClass, $parent).remove();

If modified or removed this plugin could easily allow for multiple buttons being displayed at a time.

andy matthews - March 10, 2012 01:39 pm

Thanks for the nice plugin!! I just have a little problem, the button works well (it appears and I can delete) but even if i click anywhere, the button won't disapper (unless I swipe another one)... can you help me with this please?

Marc - March 24, 2012 12:11 pm

Hi Andy, great plugin.
I only have a problem with deleting the row. It visually removes itself from the list, but I can't actually delete the row from the database.

I pass to ass the data-swipeurl="handler_clients.php?command=deleteClient&client_id='.$row['id'].'"

unfortunately nothing happens. It seems as clicking the delete button does not make any href call...

can you help me figuring out what I'm doing wrong?

Nick - April 12, 2012 10:37 am

Nick...

First thing is to check Dev Tools or Firebug. When the request is made, what URL is being called?

andy matthews - April 12, 2012 02:48 pm

Thanks Andy,

What about "Twitter for iPhone Style Swipe Menu" is there a new version that works with the latest jquery mobile versions.

Thanks again.

Hady - April 18, 2012 03:40 am

Hady...

Not yet, but I plan on on releasing an actual plugin for swipe menu soon. Hopefully within the next month.

andy matthews - April 18, 2012 09:54 am

Andy,

When I swipe the list item, the button displays "De" instead of "Delete". When I inspect the DOM and change any of its attributes or click it then it shows button text as "Delete". Weird. Any clues?

Thanks a lot!

Ecil Teodoro - May 10, 2012 11:16 pm

I was having problems getting the URL for the action to be set in JS, kept showing up as undefined... so I just did

var url = $(this).parents('li').data("swipeurl");

instead of

var url = $(e.target).attr('href');

Chad - May 12, 2012 05:34 pm

How do I attach the plugin to a dynamically generated element?

I have a static UL but the actual LI are generated via ajax.

I tried adding it after the ajax call has returned all the data, and after the listview('refresh'), but no joy :(

Thanks.

Mark - May 14, 2012 02:36 pm

Mark...

Interesting...I'd guess that because I didn't implement a refresh method in the plugin calling refresh wouldn't work. If you'd work up a simple demo page I'll use that as the basis to add that functionality in.

andy matthews - May 14, 2012 07:41 pm