垂直滑塊需要更多定製

-2

我正在使用這個垂直滑塊，它的工作原理應該是這樣，但我需要動態更改一些值。 https://jqueryui.com/resources/demos/slider/slider-vertical.html 垂直滑塊需要更多定製

我需要改變的值是在這個函數「最小」，「最大」和「價值」：

$(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")); 
});

值「MIN」，「MAX」和「值」必須是設置在每一頁重新加載，即在用戶向上或向下滑動滑塊之前。在顯示頁面之前，它們是在PHP代碼中生成的。它們保存在$ _min等變量中; $ _MAX;和$ _value; 現在的問題是如何將它們發送給javascript函數，以及如何捕獲它們。在像我把它們放在parentesis下面一個簡單的功能...

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

，然後通過函數名追上他們是這樣的：

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

但現在我不知道的名字功能。它不是JavaScript的，這是jQuery的

我希望現在的我更清楚:)

來源

2014-09-30 Max

我只是想知道爲什麼這個問題得到了（-2）。這實際上是我迄今爲止最好的格式化Q.我付出了很大的努力！對不起，我的母語不是英語。但那是我無能爲力的事情。那些給予否定的人，你能解釋一下爲什麼，所以我可以從中吸取教訓嗎？謝謝 – Max 2014-10-20 11:03:31

你的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可以被操作。

無需用戶與點擊/任何互動:)

來源

2014-09-30 15:41:46

的jQuery UI的滑塊對原料藥。檢查this。

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

來源

2014-09-30 08:11:05 shwetaOnStack

我該如何使用它？我無法在HTML代碼中調用該函數。我只有這個

– Max 2014-09-30 08:23:49

你可以學習Javascript的語言，有各種網站。但要回答您的評論，請使用在HTML中運行腳本 – 2014-09-30 08:54:30

你問一個問題之前，您應該檢查的文件，

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

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

到PHP中執行的代碼，你可以迴應的聲明這樣：

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

來源

2014-09-30 08:12:30

這不會幫助您知道。我如何讓他們工作？他們在哪裏設置？我想在頁面上傳中設置它們。 – Max 2014-09-30 08:49:32

你的問題沒有幫助，如果你想要更好的答案，請更新你的問題，並解釋完整的情況。 – 2014-09-30 08:53:01

我現在已經解釋了一些情況。希望這有幫助 – Max 2014-09-30 12:29:16

我解決了這個問題這樣

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

它現在的工作！謝謝

來源

2014-10-08 09:54:23 Max

垂直滑塊需要更多定製

回答

相關問題