https://github.com/ankane/swipeout
Swipe-to-delete goodness for the mobile web
https://github.com/ankane/swipeout
Last synced: 8 months ago
JSON representation
Swipe-to-delete goodness for the mobile web
- Host: GitHub
- URL: https://github.com/ankane/swipeout
- Owner: ankane
- License: mit
- Archived: true
- Created: 2013-02-16T09:00:39.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2022-03-24T07:31:33.000Z (about 4 years ago)
- Last Synced: 2025-01-30T20:40:44.054Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 159
- Watchers: 12
- Forks: 26
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SwipeOut
:surfer: Swipe-to-delete goodness for the mobile web
[View demo](https://ankane.github.io/swipeout/demo.html)
:tangerine: Battle-tested at [Instacart](https://www.instacart.com/opensource)
## Usage
### It’s easy to get started
Instantiate SwipeOut on a `
- ` or `
- ` element.
```javascript
var list = document.getElementById("list");
new SwipeOut(list);
```
When an item is deleted, a `delete` event is fired.
#### Javascript
```javascript
list.addEventListener("delete", function(evt) {
// do something, like an ajax call to server
// evt.target references the list item
});
```
#### jQuery or Zepto
```javascript
$("#list li").on("delete", function(evt) {
// ...
});
```
## Install
SwipeOut requires [Hammer.js](https://hammerjs.github.io/). Include the following two files on your website:
[Hammer.js](https://raw.github.com/EightMedia/hammer.js/master/hammer.js) and [SwipeOut](https://raw.github.com/ankane/swipeout/master/swipeout.js)
Just over **3kb total** when minified and gzipped
```html
```
## Customize
The delete button is unstyled by default. Give it a custom style, like an iOS theme:
```css
.swipe-out .delete-btn {
padding: 6px 8px;
border-radius: 6px;
border: solid 1px rgb(96,23,18);
background-image: linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
background-image: -webkit-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
background-image: -moz-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
background-image: -o-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));
text-shadow: 0em -0.1em rgb(51,51,51);
color: #fff;
font: bold 14px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
```
The delete button text can be set with:
```javascript
new SwipeOut(list, {btnText: "Remove"}); // default: "Delete"
```