Skip to content

ankane/swipeout

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

SwipeOut

🏄 Swipe-to-delete goodness for the mobile web

View demo

🍊 Battle-tested at Instacart

Usage

It’s easy to get started

Instantiate SwipeOut on a <ul> or <ol> element.

var list = document.getElementById("list");
new SwipeOut(list);

When an item is deleted, a delete event is fired.

Javascript

list.addEventListener("delete", function(evt) {
  // do something, like an ajax call to server
  // evt.target references the list item
});

jQuery or Zepto

$("#list li").on("delete", function(evt) {
  // ...
});

Install

SwipeOut requires Hammer.js. Include the following two files on your website:

Hammer.js and SwipeOut

Just over 3kb total when minified and gzipped

<script src="path/to/hammer.js"></script>
<script src="path/to/swipeout.js"></script>

Customize

The delete button is unstyled by default. Give it a custom style, like an iOS theme:

.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:

new SwipeOut(list, {btnText: "Remove"}); // default: "Delete"

About

Swipe-to-delete goodness for the mobile web

Resources

License

Stars

Watchers

Forks

Packages

No packages published