jQuery Slider работает неожиданно?

Question

Мне, после многих уроков и большого количества времени, удалось создать слайдер с помощью jQuery. Тем не менее, это не работает так гладко, как я бы надеялся. Я использовал собственный дескриптор, и, поскольку новый jQueryUI не имеет опции дескриптора, я создал дескриптор в CSS. Тем не менее, этот дескриптор выходит за пределы требуемых границ ползунка. Я загрузил тестовую страницу, которую можно найти здесь .

Мой код выглядит следующим образом:

CSS

<style type="text/css" media="screen">
<!--
    body {
        padding: 0; 
        font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
        font-size: 100%;
        background-color: #212121;
        margin: 0;
    }

    h1 { 
        margin-bottom: 2px; 
    }

    #container {
        background-color: #fff;
        width: 580px;
        margin: 15px auto;
        padding: 50px;
    }

    /* slider specific CSS */
    .sliderGallery {
        background: url(productbrowser_background_20070622.jpg) no-repeat;
        overflow: hidden;
        position: relative;
        padding: 10px;
        height: 160px;
        width: 560px;
    }

    .sliderGallery UL {
        position: absolute;
        list-style: none;
        overflow: none;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }

    .sliderGallery UL LI {
        display: inline;
    }

    .slider {
        width: 542px;
        height: 17px;
        margin-top: 140px;
        margin-left: 5px;
        padding: 1px;
        position: relative;
        background: url(productbrowser_scrollbar_20070622.png) no-repeat;
    }

    .ui-slider .ui-slider-handle {
        width:180px;
        margin-left:-90px;
    }

    .ui-slider-handle {
        position: absolute;
        cursor: default;
        height: 17px;
        top: 0;
        background: url(productbrowser_scroller_20080115.png) no-repeat;
        z-index: 100;
    }

    .slider span {
        color: #bbb;
        font-size: 80%;
        cursor: pointer;
        position: absolute;
        z-index: 110;
    }

    .slider .slider-lbl1 {
        left: 50px;
    }

    .slider .slider-lbl2 {
        left: 220px;
    }

    .slider .slider-lbl3 {
        left: 156px;
    }

    .slider .slider-lbl4 {
        left: 280px;
    }

    .slider .slider-lbl5 {
        left: 455px;
    }
-->
</style>

JQuery

<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;

        $('.handle', container).slider({
            min: -50,
            max: itemsWidth,
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };
</script>

Body

<div id="container">
    <div class="sliderGallery">
        <ul>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
        </ul>
        <div class="slider ui-slider">
            <div class="handle"></div>
            <span class="slider-lbl1">Our Books</span>
            <span class="slider-lbl2">Other Books</span>
        </div>
    </div>
</div>

Что я хотел бы знать, есть ли способ заставить ползунок остаться внутри изображения позади него? Тестовая ссылка позволит вам понять, что я имею в виду, если я не объясню себя четко.

Заранее спасибо, Dronnoc

Answer 1

Проблема возникает из-за того, что ваш дескриптор настроен на выход за пределы своего контейнера.

Две проблемы возникают из следующих

.ui-slider .ui-slider-handle {
    width:180px;
    margin-left:-90px;
}

Во второй строке говорится, чтоползунку разрешено идти на 90px раньше, чем слева от его первоначального контейнера (отсюда и левое переполнение)

А если установить левую часть ручки на 100%, это означает, что он переполнится справа от 90px (180-90).

То, как я справился бы с этим, должно было бы опустить margin-left:-90px;, уменьшить ширину прокрутки div на 180px и использовать другой div для отображения изображения полосы прокрутки (расположено подваш скользящий div, но шире).

Что-то вроде:

.slider {
    width: 362px;
    height: 17px;
    margin-top: 140px;
    margin-left: 5px;
    padding: 1px;
    position: relative;
}

.ui-slider .ui-slider-handle {
    width:180px;
}
.sliderImg{
    background: url(productbrowser_scrollbar_20070622.png) no-repeat;
    /*add css to position it correctly here*/
}

РЕДАКТИРОВАТЬ: Чтобы ответить на ваш комментарий, следующее исправление CSS на вашей странице должнозаставить эту работу:

.slider {
    /*let the rest as is*/
    margin-left: 90px;
}

.ui-slider .ui-slider-handle {
    width:180px;
    margin-left:-90px;
}

Эта комбинация позволит ему с теми же границами (-90 + 90 = 0), но собирается заставить его двигаться хорошо.

EDIT2:

, чтобы включитьнажмите на ручку, вам нужно будет указать высоту handle (иначе вы не сможете нажать на нее).Однако это переместит ваш промежуток под скользящим делителем, чтобы преодолеть его, вам нужно будет указать их верхнюю позицию (так как у вас они уже есть в абсолюте, это просто ;)).

Следующее должно быть сделано.

.handle {
    height: 100%;
} 
.slider span {
    /*let the rest as is*/
    top: 0;
}

Чтобы это работало выше диапазона, вам нужно немного изменить HTML-код следующим образом:

  <div class="handle">
      <span id="slider-tags" class="slider-lbl1">Our Books</span>
      <span id="slider-tags" class="slider-lbl2">Other Books</span>
  </div>