0

我在互联网的某个地方有这个滑块，我想在这个滑块上添加一个文本框，所以当这个滑块内的值发生变化时，滑块将自己设置为文本框中的给定值。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Papermashup.com | jQuery UI Slider Demo</title>
    <link href="../style.css"
    rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <style type="text/css">
        #container {
            background:url(bg.jpg)!important;
            padding:100px 50px 0px 50px;
        }
        /*the slider background*/
        .slider {
            width:230px;
            height:11px;
            background:url(slider-bg.png);
            position:relative;
            margin:0;
            padding:0 10px;
        }
        /*Style for the slider button*/
        .ui-slider-handle {
            width:24px;
            height:24px;
            position:absolute;
            top:-7px;
            margin-left:-12px;
            z-index:200;
            background:url(slider-button.png);
        }
        /*Result div where the slider value is displayed*/
        #slider-result {
            font-size:50px;
            height:200px;
            font-family:Arial, Helvetica, sans-serif;
            color:#fff;
            width:250px;
            text-align:center;
            text-shadow:0 1px 1px #000;
            font-weight:700;
            padding:20px 0;
        }
        /*This is the fill bar colour*/
        .ui-widget-header {
            background:url(fill.png) no-repeat left;
            height:8px;
            left:1px;
            top:1px;
            position:absolute;
        }
        a {
            outline:none;
            -moz-outline-style:none;
        }
    </style>
</head>
<body>
    <div class="slider"></div>
    <div id="slider-result">50</div>
    <div class="ui-widget-header"></div>
    <input type="hidden" id="hidden" />
    <script>
        $(".slider").slider({
            animate: true,
            range: "min",
            value: 50,
            min: 0,
            max: 80,
            step: 1,
            //this gets a live reading of the value and prints it on the page
            slide: function (event, ui) {
                $("#slider-result").html(ui.value);
            },
            //this updates the hidden form field so we can submit the data using a form
            change: function (event, ui) {
                $('#hidden').attr('value', ui.value);
            }
        });
    </script>
</body>

</html>

希望我解释得足够好。

4

1 回答 1

1

好吧，您正在使用 jQuery UI。就像您复制的脚本一样，您可以在这部分的评论中阅读：

slide: function (event, ui) {
                $("#slider-result").html(ui.value);
}

您的结果实时更新。

所以如果你做一点修改：

添加此 HTML：

<input type="text" id="showslider" />

并修改活动滑动的东西/

slide: function (event, ui) {
     $("#slider-result").html(ui.value);
     $("#showslider").val(ui.value);
}

那么事情应该会奏效。

编辑：

您可以在文本框中添加一个事件侦听器，以便在每次用户键入或按下回车键时更改值（这就是您想要的方式），例如：

$("#showslider").keyup(function (e){
     $(".slider").slider("value", $("#showslider").val());
}

更多信息可以在这里找到：

http://jqueryui.com/demos/slider/

于 2012-06-05T15:34:10.433 回答