Skip to content

mishk0/swiped

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)
    }
});

About

Swiped.js - pretty swipe list for your mobile application, written in pure JS

Resources

License

Stars

Watchers

Forks

Packages

No packages published