🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

swipeTo is a small jQuery plugin to emulate iOS swipe to delete functionality which displays a group of action buttons as the visitor swipe on a list view.

list-view swipe

Documentation

#swipeTo# swipeTo is a jQuery plugin that emulate the native swipe to action feature upon a list on mobile phones #Usage#

DOM

<div class="list">     <div class="item">         <a href="#" class="item-swipe">Item</a>         <div class="item-back">             ...         </div>     </div>     ...     <div class="item">         <a href="#" class="item-swipe">Item</a>         <div class="item-back">             ...         </div>     </div> </div> 

Javascript

$(function() { 	$('.item-swipe').swipeTo({ 		minSwipe: 100, 		angle: 10, 		wrapScroll: 'body', 		binder: true, 		swipeStart: function() { 			console.log('start'); 		}, 		swipeMove: function() { 			console.log('move'); 		}, 		swipeEnd: function() { 			console.log('end'); 		}, 	}); }) 

Options

minSwipe

You can set a minimum swipe size in pixel. If the handler is swiped for less the this option, it will be moved to the origin (to 0px)

angle

angle is an angular coefficient that prevents the swipe effect to be initialized during the vertical page scrolling. Through this option you can set a greater or lesser coefficient

wrapScroll

This option allows you to set the property "overflow: hidden" on an item during the swipe to prevent vertical scroll

binder

You can set this option as true or false to close ad open element swiped with a tap

swipeStart, swipeMove, swipeEnd

These are the callbacks that will be initialized, respectively, at the beginning, during ad at the end of the swipe effect

If you want to use default options simply place this code in your javascript file

$(function() {     $('.item-swipe').swipeTo(); }) 

You May Also Like