https://github.com/andersdjohnson/swipe-reveal

Swipe-to-reveal actions for lists.
https://github.com/andersdjohnson/swipe-reveal

Last synced: 16 days ago
JSON representation

Swipe-to-reveal actions for lists.

• Host: GitHub
• URL: https://github.com/andersdjohnson/swipe-reveal
• Owner: AndersDJohnson
• License: mit
• Created: 2013-09-02T05:07:50.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-04-05T00:44:05.000Z (over 1 year ago)
• Last Synced: 2024-10-10T16:26:52.053Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://AndersDJohnson.github.io/swipe-reveal/examples/basic/
• Size: 3.88 MB
• Stars: 15
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.](http://AndersDJohnson.github.io/swipe-reveal/examples/basic/)

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:

```html



  
...



```


```javascript

$(function () {

  $('.swipe-reveal').swipeReveal({

    revealed: function (el) {

      return '
 Revealed! 
  Undo ';

    }

  });

});

```


See examples directory for more details.

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

```javascript

var $list = $('.swipe-reveal');

$list.swipeReveal();

// ...

$list.swipeReveal('undo', listElement);

```

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

```javascript

// ...

$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