Question

我正在使用这个垂直滑块，它可以正常工作，但我需要动态更改一些值。 https://jqueryui.com/resources/demos/slider/slider-vertical.html

我需要改变的值是＆＃34; min＆＃34;，＆＃34; max＆＃34;和＆＃34;价值＆＃34;在这个功能：

$(function() {
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});

价值观＆＃34; min＆＃34; ，＆＃34; max＆＃34;和＆＃34;价值＆＃34;必须在每页重新加载时设置，即在用户向上或向下滑动滑块之前。它们是在显示页面之前在PHP代码中生成的。它们保存在诸如$ _min之类的变量中; $ _MAX;和$ _value; 现在问题是如何将它们发送到javascript函数以及如何捕获它们。在一个像下面这样的简单函数中，我把它们放在了肠胃外...

<input type="text" onClick="myVal(<?php echo $_min ?>);">

然后通过这样的函数名称捕获它们：

function myVal(a)
{alert(a) ; 
----- do something more ---
}

但现在我甚至不知道该功能的名称。它不是javascript，它是jquery

我希望现在我更清楚了：）

Answer 1

jquery-UI滑块有API。检查this。

$( ".selector" ).slider( "option", "max", 50 );
$( ".selector" ).slider( "option", "min", 10);
$( ".selector" ).slider( "option", "value", 10 );

Answer 2

在提出问题之前，您应该查看文档，

$( "#slider-vertical" ).slider( "option", "max", 300 );

http://api.jqueryui.com/slider/

要在php中执行代码，您可以回复语句：

<?php
    echo "<script> $( '#slider-vertical' ).slider( 'option', 'max', " + $_max + "); </script>";
?>

Answer 3

您的PHP / HTML应如下所示：

<div id="slider-vertical" 
     data-slider-min="<?php echo $_min ?>"
     data-slider-max="<?php echo $_max ?>"
     data-slider-value="<?php echo $_value ?>"
>
</div>

您的Javascript应如下所示：

$(document).ready( function()  {

    var $slider = $("#slider-vertical"),
        min = $slider.data("slider-min"),
        max = $slider.data("slider-max"),
        value = $slider.data("slider-value");

    $slider.slider({

        orientation: "vertical",
        range: "min",
        min: min,
        max: max,
        value: value,
        slide: function( event, ui ) { $("#amount").val( ui.value ); }

    });

});

说明：

我们使用PHP将变量作为html data attributes附加到HTML元素。然后我们可以使用jQuery访问这些数据，并在滑块上设置值。

PHP使用数据呈现服务器上的页面页面，然后当用户加载它时，他们的浏览器会告诉jQuery收集信息并从中创建一个滑块。

jQuery包含在一个函数中，该函数确保Document可以被操作。

用户无需与点击/任何内容进行互动：）

Answer 4

我解决了这个问题

min: - document.getElementById("diff").value,
max: document.getElementById("diff").value,
value: 0,
document.getElementById("bild").style.top = ( ui.value );
document.getElementById("klip22").style.top = ( $( "#slider-vertical" ).slider( "value" )

现在正在工作！感谢

垂直滑块需要更加个性化

4 个答案: