Php 将具有onchange属性的文本字段添加到滑块_Php_Javascript_Html

Php 将具有onchange属性的文本字段添加到滑块

php javascript html

Php 将具有onchange属性的文本字段添加到滑块,php,javascript,html,Php,Javascript,Html,我在互联网的某个地方得到了这个滑块，我想在这个滑块上添加一个文本框，所以当这个滑块内的值发生变化时，滑块会将自身设置为文本框中的给定值 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Papermashup.com | jQuery UI Slider Demo</title> <link href=

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

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


Papermashup.com | jQuery用户界面滑块演示
#容器{
背景：url（bg.jpg）！重要；
填充：100px 50px 0px 50px；
}
/*滑块背景*/
.滑块{
宽度：230px；
高度：11px；
背景：url（slider bg.png）；
位置：相对位置；
保证金：0；
填充：0 10px；
}
/*滑块按钮的样式*/
.ui滑块句柄{
宽度：24px；
高度：24px；
位置：绝对位置；
顶部：-7px；
左边距：-12px；
z指数：200；
背景：url（sliderbutton.png）；
}
/*显示滑块值的结果div*/
#滑块结果{
字体大小：50px；
高度：200px；
字体系列：Arial、Helvetica、无衬线字体；
颜色：#fff；
宽度：250px；
文本对齐：居中；
文本阴影：0 1px 1px#000；
字号：700；
填充：20px0；
}
/*这是填充栏的颜色*/
.ui小部件头{
背景：url（fill.png）没有重复；
高度：8px；
左：1px；
顶部：1px；
位置：绝对位置；
}
a{
大纲：无；
-moz轮廓样式：无；
}
50
$（“.slider”）.slider({
动画：对，
射程：“分钟”，
价值：50，
分:0,，
最高：80，
步骤：1，
//这将实时读取值并将其打印到页面上
幻灯片：功能（事件、用户界面）{
$（“#滑块结果”）.html（ui.value）；
},
//这将更新隐藏的表单字段，以便我们可以使用表单提交数据
更改：功能（事件、用户界面）{
$（'#hidden'）.attr（'value'，ui.value）；
}
});

希望我解释得足够好。

您使用的是jQuery UI。与您复制的脚本一样，您可以在本部分的注释中阅读：

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

您的结果将实时更新

因此，如果您进行一些修改：

添加此HTML：

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

那这东西应该能用了

编辑：

您可以将事件侦听器添加到文本框中，以便在每次用户键入或按enter键时（这是您想要的方式）是否为此类示例：

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

更多信息可在此处找到：

只需在需要的地方添加textfield，给它一个id，然后用textfield和.val（ui.value）的id扩展slide:函数@鲁菲努斯tnx。我必须给文本框中的onchange赋予什么值呢？提示是tnx。但是我想要“showslider”，它是一个文本框，也可以控制滑块。我想能够通过“showslider”设置滑块。

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