Управление клавиатурой для tinyscrollbar.js

Я хочу добавить управление клавиатурой для сценария крошечной полосы прокрутки. я не очень хорошо разбираюсь в javascript. я знаю, что я могу использовать функцию jquery keypress() для перехвата клавиш со стрелками (38,40), а затем прокрутить обзорный div, изменив его свойство css top.

Я могу сделать это вне плагина tinyscrollbar, но я хотел бы использовать для этого функции, которые уже есть внутри плагина.

Любое направление о том, как начать это, будет большой помощью. Спасибо.

для получения дополнительной информации см. код полосы прокрутки. И дополнительная информация и демонстрации здесь.


person alhoseany    schedule 31.10.2012    source источник


Ответы (2)


Я добавил в плагин новую функцию и использовал ее для обновления прокрутки при нажатии клавиши.

В плагин добавлен код:

// define the added function
 jQuery.fn.tinyscrollbar_updatescroll = function(sScroll)
{
    return jQuery( this ).data( 'tsb' ).updatescroll( sScroll ); 
};
// end of added function definition

function Scrollbar( root, options )
{
    var oSelf       = this
    ,   oWrapper    = root
    ,   oViewport   = { obj: jQuery( '.viewport', root ) }
    ,   oContent    = { obj: jQuery( '.overview', root ) }
    ,   oScrollbar  = { obj: jQuery( '.scrollbar', root ) }
    ,   oTrack      = { obj: jQuery( '.track', oScrollbar.obj ) }
    ,   oThumb      = { obj: jQuery( '.thumb', oScrollbar.obj ) }
    ,   sAxis       = options.axis === 'x'
    ,   sDirection  = sAxis ? 'left' : 'top'
    ,   sSize       = sAxis ? 'Width' : 'Height'
    ,   iScroll     = 0
    ,   iPosition   = { start: 0, now: 0 }
    ,   iMouse      = {}
    ,   touchEvents = 'ontouchstart' in document.documentElement
    ;

    function initialize()
    {
        oSelf.update();
        setEvents();

        return oSelf;
    }

    // the new added function using the wheel function
    this.updatescroll = function( sScroll )
    {
        if( oContent.ratio < 1 )
        {

            iScroll -= sScroll;
            iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));

            oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
            oContent.obj.css( sDirection, -iScroll );

        }
    };
    // end of added function

код вне плагина:

jQuery('body').keydown(function (event) {
    if (event.keyCode == 38) {
      // up arrow
      $('#scrollbar1').tinyscrollbar_updatescroll(40);
    } else if (event.keyCode == 40) {
     // down arrow
     $('#scrollbar1').tinyscrollbar_updatescroll(-40);
    }
  });

tinyscrollbar_updatescroll прокручивает содержимое до текущей позиции плюс отправленная ему сумма. оригинальная функция tinyscrollbar_update прокручивает содержимое до определенной позиции, заданной в пикселях.

person alhoseany    schedule 01.11.2012

Вам нужно будет расширить этот плагин, чтобы он поддерживал события keydown и keyup, и добавить функциональность для прокрутки в соответствии с этими нажатиями клавиш. Текущая функциональность прокрутки в плагине напрямую связана с перетаскиванием с помощью мыши или изменений колесика мыши.

В качестве альтернативы вы можете использовать что-то еще со встроенными событиями клавиатуры. https://github.com/adaburrows/jquery.ui.scrollbar

person mccannf    schedule 31.10.2012