Swiped.js - pretty swipe list for your mobile application, written in pure JS
Switch branches/tags
Clone or download
Latest commit 9f07006 May 14, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist upd min May 14, 2015
tests 0.1.2 Apr 25, 2015
.gitignore gitignore Apr 12, 2015
LICENSE init Apr 1, 2015
README.md Update README.md May 7, 2015
bower.json v 0.1.4 May 14, 2015
gulpfile.js update npm Apr 12, 2015
index.html Child elements aren't slidable #3 May 14, 2015
karma.conf.js add tests Apr 12, 2015
package.json v 0.1.4 May 14, 2015

README.md

Swiped.js

license npm

swiped.js qrcode

Demo (use mobile or emulate touches mode on your browser)

swiped.js

Features

  • Dependency-free.
  • Short & long swipe.
  • Swipe to delete.
  • Easy to use.
  • CSS transforms & transitions.

Installation

npm install swiped
bower install swiped

API

Swiped(options)

  • options (object) - Options to configure a new instance of Swiped.
  • [options.query] (string) - Query selector.
  • [options.duration] (number) - The time (milliseconds) to open/close the element. Default: 200.
  • [options.tolerance] (number) - Default: 150.
  • [options.time] (number) - Time for short swipe. Default: 200.
  • [options.left] (number) - Distance for swipe from left to right. Default: 0.
  • [options.right] (number) - Distance for swipe from right to left. Default: 0.
  • [options.list] (boolean) - Elements depend on each other. Default: false.
  • [options.onOpen] (function).
  • [options.onClose] (function).
var s = Swiped.init(options);

s.open();
s.close();
s.toggle();
s.destroy([isRemoveNode])

Usage

Example of the html markup for single element:

<div class="foo">
    elem1
</div>

for multiple:

<ul class="bar">
    <li>
        elem3
    </li>
    <li>
        elem4
    </li>
    <li>
        elem5
    </li>
</ul>

for switch:

<div class="foo"><span></span>element 16</div>

initialization for single element:

var s1 = Swiped.init({
    query: '.foo',
    right: 300
});

for multiple:

var s2 = Swiped.init({
    query: '.bar li',
    list: true,
    left: 200,
    right: 200
});

for switch:

var s3 = Swiped.init({
    query: '.foo',
    left: 400
});

document.querySelector('.foo span').addEventListener('touchstart', function() {
    s3.toggle();
});

Implementation for "swipe to delete"

Swiped.init({
    query: '.baz',
    right: 400,
    onOpen: function() {
        this.destroy(true)
    }
});