Содержание JQuery DIV SLIDE

Question

Я хотел сделать

(А) http://jqueryui.com/demos/slider/#side-scroll

(В) http://jqueryui.com/demos/slider/steps.html

Привет всем,

Я создаю ползунок настройки.

Я хотел, чтобы функциональные возможности A и B смешались вместе

1) Ящики в А будут находиться в другом теге / категории, поэтому для Примером будет категория кошек, собак и змей.

2) Теперь я хотел, когда я нажму на CAT, ползунок будет скользить по этой конкретной группе, связанной с тегом, и т.д.

3) Если я сделаю слайд к тегу CAT, он просто щелкнет, и категория отобразится

Помощь будет хорошей, я продолжу пытаться понять, надеюсь, я вас не смущаю. или

ИЛИ ЭТО:

http://jqueryui.com/demos/slider/#hotelrooms и http://jqueryui.com/demos/slider/#side-scroll

Вместо этого, когда вы нажимаете 3, он скользит до 3CONTENT, когда вы нажимаете 4, он скользит до 4 CONTENT

Answer 1

Вы имеете в виду что-то подобное?Я взял вашу ссылку (A) в качестве примера.

$(".scroll-content div").click(function () {
                var pos = $(this).position();
                $('.scroll-bar a').animate({ left: pos.left }, 'slow');
            });

Проверьте в действии здесь .

Update1: я обновил образец по ссылке выше, если этопомогает.

Обновление 2:

Извините, я попытался немного, но не смог сделать это полностью, но вот что у меня есть:

$(function(){
 $("div#makeMeScrollable").smoothDivScroll();
var ticker;
           $('.scrollingHotSpotRight').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               var leftval = 0;
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter++;
               }, 35);
           });
           $('.scrollingHotSpotRight').mouseout(clearStop);
           $('.scrollingHotSpotLeft').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter--;
               }, 35);
           });
           $('.scrollingHotSpotLeft').mouseout(clearStop);

           function clearStop() {
               window.clearInterval(ticker);
           }
});

Answer 2

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

//Modified from the Slider scrollbar demo
var scrollbar = $( ".scroll-bar" ).slider({
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        },
        step: 50 //<---This
    });

Или вы ищете кого-то, чтобы написать всю функциональность того, что вы просите?