Ручка слайдера jQuery не скользит - PullRequest
Новая
       23

Ручка слайдера jQuery не скользит

1 голос
/ 07 сентября 2011

Я пытаюсь настроить простой слайдер с нестандартным дизайном, но ручка слайдера не работает.Я думаю, что пропустил что-то легкое, потому что я довольно сонный.Я был бы рад, если вы посмотрите на пример кода; 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

        <style type="text/css" rel="stylesheet">
            body { background-color: green; }

            #slider {
                float: left;
                width: 19px; height: 338px;
                background-image: url('images/bg_scroller.png');
                background-position: center center;
                background-repeat: no-repeat;
            }

            #slider-handle {
                position: absolute; cursor: pointer;
                width: 19px; height: 31px;
                background-image: url('images/scroller.png');
                background-position: center center;
                background-repeat: no-repeat;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider').slider({
                    orientation: "vertical",
                    min: 0,
                    max: 100,
                    handle: '#slider-handle',
                    stop: function (event, ui) {
                        console.log("stop",ui)
                        //ul.animate({'left' : ui.value * -1}, 500);
                    },
                    slide: function (event, ui) {
                        console.log("slide",ui)
                        //ul.css('left', ui.value * -1);
                    }
                });
            });
        </script>

    </head>

    <body>

        <div id="slider">
            <div id="slider-handle"></div>
        </div>

    </body>
</html>

Пример кода также находится здесь;http://www.zpnd.com/sak/slider.php

Ответы [ 3 ]

2 голосов
/ 07 сентября 2011

Вы создаете дескриптор, который не использует виджет слайдера jQuery.Попробуйте это:

http://jsfiddle.net/petersendidit/YkjGN/2/

2 голосов
/ 07 сентября 2011

'handle' не является опцией для ползунка пользовательского интерфейса jQuery.

Удалите этот div с ползунком и опцией handle, вместо этого измените ваш css на .ui-slider-handler, и он должен работать.

С документацией по слайдеру можно ознакомиться здесь. http://jqueryui.com/demos/slider/#option-animate

0 голосов
/ 07 сентября 2011

Причина в том, что #slider-handle width совпадает с #slider width, т.е. 19px.Ручка width должна быть меньше, чтобы вы могли видеть ее движение.

...