qflipper.js

qflipper.js is flick framework made of TypeScript & jQuery for SmartPhone.


Project maintained by funnythingz Hosted on GitHub Pages — Theme by mattgraham

qflipper.js

qflipper.js is flick framework made of TypeScript & jQuery for SmartPhone.

Demo

Flip type is `simple`

0

1

2

Flip type is `rich`

0

1

2

3

Flip type is `rich` with Lamp & buttons.

0

1

2

3

4

Get Started

base HTML and CSS

HTML Layout.

Body of HTML Layout. trigger className is .view & .item.

SCSS or CSS

JavaScript Initilize

type is simple.

type is rich.

Lamp & buttons

Body of HTML Layout.

add SCSS or CSS.

JavaScript

Options

options to second argument.

default animation type is simple.

cool animation type is rich.

trigger className .view & .item can rename of options.

example

Method

toNext()

move to the next item.

toPrev()

move to the previous item.

moveToPoint(point: number)

move to an item of the specified numerical value.

refresh()

move to the first item.

hasNext(): boolean

proceed to the next item and returns true if there are entries in the following.

hasPrev(): boolean

proceed to the previous item and returns true if there are entries in the following.

getPoint(): number

get the current position of the item.

getMaxPoint(): number

get all items length.

flipElement(): JQuery

ex: returns $('#qflipper') JQuery object.

Events

fptouchstart

When the flip element touch is start.

fptouchmove

When the flip element touch is move.

fptouchend

When the flip is over.

License

qflipper.js is released under the MIT license. See LICENSE.md.

© funnythingz