gallery-itsascrollviewkeynav

Plugin Y.Plugin.ITSAScrollViewKeyNav

Plugin that enables scrollview-navigation with keys.

In order to response to key-events, the scrollview-instance needs to have focus. This can be set either by myScrollView.focus() -or blur()- or by setting the attribute ‘initialFocus’ to true. The plugin also works when Plugin.ScrollViewPaginator is plugged-in. The behaviour will be different, because the scrolling is paginated in that case.

If this plugin is plugged into a Y.ITSAScrollViewModellist-instance, then the keynavigation will scroll through the items in case the attribute ‘modelsSelectable’ is set to true.

Examples

Online example

Documentation

API Docs

Usage

Initial focus (immediate response to key-events):

YUI().use('scrollview', 'gallery-itsascrollviewkeynav', function(Y) {

    var scrollView = new Y.ScrollView({
            srcNode: '#scrollview-content',
            height: 500,
            axis: 'y'
        });

    scrollView.plug(Y.Plugin.ITSAScrollViewKeyNav, {initialFocus: true});
    scrollView.render();

});

No initial focus, but focus later on (response to key-events after 5 seconds)

YUI().use('scrollview', 'gallery-itsascrollviewkeynav', function(Y) {

    var scrollView = new Y.ScrollView({
            srcNode: '#scrollview-content',
            height: 500,
            axis: 'y'
        });

    scrollView.plug(Y.Plugin.ITSAScrollViewKeyNav);
    scrollView.render();

    Y.later(
        5000,
        scrollView,
        scrollView.focus
    );

});

License

Copyright (c) 2013 Its Asbreuk

YUI BSD License