JQuery ползунок и скроллер взаимодействия - PullRequest
Новая
       51

JQuery ползунок и скроллер взаимодействия

2 голосов
/ 19 ноября 2011

У меня есть скроллер контента, основанный на отличной работе в flowplayer. Это имеет левую панель навигации с кнопками, каждый из которых прокручивает содержимое в нужное место. Я поместил ползунок под контентом, который также прокручивает контент вперед и назад. Мне бы хотелось, чтобы скроллер и ползунок взаимодействовали друг с другом, чтобы при нажатии на одну из левых кнопок навигации ползунок внизу также перемещался. Например. если есть четыре кнопки и я нажимаю вторую, то ползунок перемещается на четверть пути.

Смотрите мое демо здесь: http://www.dinosaurus.com.au/clients/slidertest/test2/

Код: 

$(document).ready(function() {

// main horizontal scroll
$("#main").scrollable({

// basic settings
vertical: false, 

// up/down keys will always control this scrollable
keyboard: 'static',

// assign left/right keys to the actively viewed scrollable
onSeek: function(event, i) {
    horizontal.eq(i).data("scrollable").focus();
}

// main navigator (thumbnail images)
}).navigator("#main_navi");

// vertical scrollables. each one is circular and has its own navigator instance
var vertical = $(".scrollable").scrollable({

circular: true,

// basic settings
vertical: true

}).navigator(".navi");

// when page loads setup keyboard focus on the first vertical scrollable
vertical.eq(0).data("scrollable").focus();

});

// **this is the bottom scroller <- need it to interact with the $("#main").scrollable() function above**
$(function() {

//vars
var conveyor = $("#pages", $("#wrapper")),
item = $(".page", $("#wrapper"));

//set length of conveyor
//conveyor.css("width", item.length * parseInt(item.css("width")) +20 );

//config
var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($("#main",$("#wrapper")).css("width")),
  slide: function(e, ui) { 
    conveyor.css("left", "-" + ui.value + "px");
  }
};

//create slider
$("#slider").slider(sliderOpts);

});

Пожалуйста, просмотрите исходный код для структуры страницы. Вызовы запросов находятся внизу.

Заранее благодарю за помощь.

1 Ответ

0 голосов
/ 21 ноября 2011

Вы можете использовать опцию value внутри события 'scrollable'. 'OnSeek' - в используемой логике есть немного математики ...

...