Question

我正在尝试使用自定义设计设置一个简单的滑块，但滑块手柄不起作用。我想我错过了一些简单的事情因为我很困。如果您能看一下示例代码，我很高兴;

<!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

Answer 1

您正在创建jQuery滑块小部件未使用的句柄。试试这个：

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

Answer 2

'handle'不是jQuery UI滑块的选项。

删除滑块手柄div和'handle'选项，然后将你的css更改为'.ui-slider-handler'，它应该可以工作。

您可以在此处查看Slider文档。 http://jqueryui.com/demos/slider/#option-animate

Answer 3

原因是#slider-handle width与#slider width相同，即19px。手柄width应该更小，以便您看到它的移动。

jQuery滑块的手柄不会滑动

3 个答案: