diff --git a/readme.mkd b/readme.mkd index 4481a95..7b15ce3 100644 --- a/readme.mkd +++ b/readme.mkd @@ -10,8 +10,8 @@ All branches: [![Build Status](https://secure.travis-ci.org/davetayls/jquery.kin jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers. -Compatibility -------------- +## Compatibility + This plugin works with [jQuery](http://jquery.com) and [Zepto](http://zeptojs.com/) @@ -22,10 +22,83 @@ This plugin works with [jQuery](http://jquery.com) and - safari: 5 - iOS Safari: 4 -Demos ------ +## Demos Take a look at a demo on . +## Options + + cursor {string} default: move Specify the cursor to use on the wrapper + slowdown {number} default: 0.9 This option affects the speed at which the scroll slows + x {string} default: true Toggles movement along the x axis + y {string} default: true Toggles movement along the y axis + maxvelocity {number} default: 40 This option puts a cap on speed at which the container + can scroll + throttleFPS {number} default: 60 This adds throttling to the mouse move events to boost + performance when scrolling + triggerHardware {boolean} false This adds css to the wrapper which + will trigger iOS to use hardware acceleration + + filterTarget {function(target)} Return false from this function to + prevent capturing the scroll + + movingClass {object} + up: {string} default: 'kinetic-moving-up' + down: {string} default: 'kinetic-moving-down' + left: {string} default: 'kinetic-moving-left' + right: {string} default: 'kinetic-moving-right' + + deceleratingClass {object} + up: {string} default: 'kinetic-decelerating-up' + down: {string} default: 'kinetic-decelerating-down' + left: {string} default: 'kinetic-decelerating-left' + right: {string} default: 'kinetic-decelerating-right' + + Listeners: All listeners are called with: + - this = jQuery object holding the scroll container + - a single settings argument which are all the options and + { scrollLeft, scrollTop, velocity, velocityY } + + moved {function(settings)} A function which is called on every move + stopped {function(settings)} A function which is called once all + movement has stopped + + Methods: You can call methods by running the kinetic plugin + on an element which has already been activated. + + eg $('#wrapper').kinetic(); // activate + $('#wrapper').kinetic('methodname', options); + + start Start movement in the scroll container at a particular velocity. + This velocity will not slow until the end method is called. + + The following line scrolls the container left. + $('#wrapper#).kinetic('start', { velocity: -30 }); + + The following line scrolls the container right. + $('#wrapper#).kinetic('start', { velocity: 30 }); + + The following line scrolls the container diagonally. + $('#wrapper#).kinetic('start', { velocity: -30, velocityY: -10 }); + + end Begin slowdown of any scrolling velocity in the container. + $('#wrapper#).kinetic('end'); + + stop Stop the scrolling immediately + + detach Detach listeners and functionality from the wrapper + + attach Re-attach listeners and functionality previously detached using + the detach method + + Add your own method: + // add the method + $.kinetic.callMethods.do = function(settings, options){ + // method functionality + }; + + // use the method + $('#elem').kinetic('do', { ... }); + Running the tests ------- @@ -101,77 +174,3 @@ Notes The scrollbar plugin is still very much an alpha version. -Options -------- - - cursor {string} default: move Specify the cursor to use on the wrapper - slowdown {number} default: 0.9 This option affects the speed at which the scroll slows - x {string} default: true Toggles movement along the x axis - y {string} default: true Toggles movement along the y axis - maxvelocity {number} default: 40 This option puts a cap on speed at which the container - can scroll - throttleFPS {number} default: 60 This adds throttling to the mouse move events to boost - performance when scrolling - triggerHardware {boolean} false This adds css to the wrapper which - will trigger iOS to use hardware acceleration - - filterTarget {function(target)} Return false from this function to - prevent capturing the scroll - - movingClass {object} - up: {string} default: 'kinetic-moving-up' - down: {string} default: 'kinetic-moving-down' - left: {string} default: 'kinetic-moving-left' - right: {string} default: 'kinetic-moving-right' - - deceleratingClass {object} - up: {string} default: 'kinetic-decelerating-up' - down: {string} default: 'kinetic-decelerating-down' - left: {string} default: 'kinetic-decelerating-left' - right: {string} default: 'kinetic-decelerating-right' - - Listeners: All listeners are called with: - - this = jQuery object holding the scroll container - - a single settings argument which are all the options and - { scrollLeft, scrollTop, velocity, velocityY } - - moved {function(settings)} A function which is called on every move - stopped {function(settings)} A function which is called once all - movement has stopped - - Methods: You can call methods by running the kinetic plugin - on an element which has already been activated. - - eg $('#wrapper').kinetic(); // activate - $('#wrapper').kinetic('methodname', options); - - start Start movement in the scroll container at a particular velocity. - This velocity will not slow until the end method is called. - - The following line scrolls the container left. - $('#wrapper#).kinetic('start', { velocity: -30 }); - - The following line scrolls the container right. - $('#wrapper#).kinetic('start', { velocity: 30 }); - - The following line scrolls the container diagonally. - $('#wrapper#).kinetic('start', { velocity: -30, velocityY: -10 }); - - end Begin slowdown of any scrolling velocity in the container. - $('#wrapper#).kinetic('end'); - - stop Stop the scrolling immediately - - detach Detach listeners and functionality from the wrapper - - attach Re-attach listeners and functionality previously detached using - the detach method - - Add your own method: - // add the method - $.kinetic.callMethods.do = function(settings, options){ - // method functionality - }; - - // use the method - $('#elem').kinetic('do', { ... });