README.md

SwipeReveal

Soup up your vanilla HTML list with swipe-to-reveal actions, à la the Gmail app for Android or Twitter for iPhone.

Works with mouse and touch events!

Here's a demo.

Depends on jQuery, Hammer.js, jQuery Easing, jQuery doTimeout, jquery-bridget, and optionally jQuery-Animate-Enhanced.

Usage

Install with Bower:

bower install swipe-reveal

Then add code:

<ul class="swipe-reveal">
  <li>...</li>
</ul>

$(function () {
  $('.swipe-reveal').swipeReveal({
    revealed: function (el) {
      return '<div> Revealed! </div> <button class="undo"> Undo </button>';
    }
  });
});

See examples directory for more details.

To programmatically "undo" a reveal on a list item (returning it to default state), use:

var $list = $('.swipe-reveal');
$list.swipeReveal();
// ...
$list.swipeReveal('undo', listElement);

And to "dismiss" a list item (remove from list), use:

// ...
$list.swipeReveal('dismiss', listElement);
});

Options

See source code for all options. Here are some important ones:

revealed function ( HTMLElement ) => String: A function returning markup for revealed content. Called for each list element, passed as an argument.

revealThreshold Number (default = 0.33): A value 0-1 representing the minimum distance as a fraction of item list width that drag must be in order to trigger a reveal.

undoSelector String (default = '.undo'): A selector for an element in the revealed markup that triggers an "undo" event to close the reveal.

autoDismiss Boolean (default = true): Whether to automatically remove revealed items if an "undo" isn't requested before dismissTimeout.

dismissTimeout Number (default = 3000): Time until revealed items are automatically dismissed, if autoDismiss is enabled.

License

MIT. Copyright Anders D. Johnson