Sunday, October 27, 2013

Delete on swipe or swipe on delete

Hello everyone!

Have you ever confronted a problem or a challenge to build a functionality to delete records on swipe ?
If yes, then you are welcome here! Actually iOS invented this unique way of deleting records!
I have integrated this functionality because one of my friend was having some problem building it with backbonejs. I really wondered how it work, so I integrated the environment on my local and so far it is really cool!
Look at the image below,

At the very first you can see when you swipe a row/record to right, you will see delete button and when you click/touch on delete button that row/record will be get deleted! plain and simple.
Integrating this functionality is pretty simple. All you need is jQuery, hammer.js & swipeout.js.

I have integrated all of this on my google code account! You can download all required files from here!

Now very first, look at the code at swipe.html file. You can see I have attached jquery library there! I have also attached hammer.js and swipeout.js library. Now, just run the swipe.html file in any browser. You will see some reocords! Now, just swipe any random records to right side. You will see the delete button. When you click on delete button the record will be get deleted. Right now I am showing some alert popup! You can replace it with your delete method's. This methods can be an api ajax call to delete record by Id or something.

So this is how you can utilize this feature in your mobile website!
Source code available on Google code project delete-on-swipe

Thanks for reading.
Amit Naik

No comments:

Post a Comment