Foundation 6 Slider Update auf Seite laden

Question

Ich habe eine Foundation 6 Slider auf einer HTML-Seite, die ich zum Einrichten eines Gerätes Parameter verwenden. Beim Laden der Seite habe ich die Parameter aus einer XML-Datei gelesen und die Seite entsprechend eingerichtet.

In Bezug auf den Schieberegler, modifiziere ich die Eingangsnummer, die über aria-contro l mit dem Schieberegler verbunden ist. Das Problem ist, dass der Slider nicht aktualisiert wird. Wie kann ich den Schieberegler aktualisieren?

Dort wird der html:

<div class="row"> 
    <div class="small-4 large-4 columns"> 
    <label>Audio&nbsp;Volume</label> 
    </div> 
    <div class="small-6 large-6 columns"> 
    <div class="slider" id="slidervol" data-slider data-end="100" display_selector: "#slidervol"> 
     <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderVolOutput"></span> 
     <span class="slider-fill" data-slider-fill></span> 
    </div> 
    </div> 
    <div class="small-2 large-2 columns"> 
    <input name="AudioVolTxtbox" type="number" style="width: 4em;" tabindex="2" id="sliderVolOutput"> 
    </div> 
</div> 

und hier das Javascript Ich benutze das Formular auf Last zu aktualisieren:

function writeDeviceConfForm(xmldoc) { 
    var vartxt; 
    var element; 

    vartxt = xmldoc.getElementsByTagName("AudioVolume")[0].firstChild.nodeValue; 
    document.DeviceConfig.AudioVolTxtbox.value = vartxt; //input box is correctly updated 

    ... 
    $('#slidervol').val(33); //this does not work (do nothing) 
    $('#slidervol').foundation('slider', 'set_value', 33); //this does not work (error: slider is not an accepted parameter) 
} 

Answer 1

Erstens ist display_selector keine gültige attribute soweit ein slider ist besorgt, so können Sie es loswerden. Ich nehme an, Sie rufen $(document).foundation(), um den Schieberegler zu initialisieren ?, wenn nicht, stellen Sie sicher, dass Sie dies am Ende der body tun. Um den Wert slider zu aktualisieren, verwenden Sie Foundation.Slider.defaults.intialStart. Das Objekt Foundation enthält Eigenschaften, die alle verfügbaren Plugins darstellen. Jedes Plugin verfügt über ein defaults-Objekt, das aus zahlreichen Eigenschaften besteht, die Sie vor der Initialisierung überschreiben können.

Diese beiden Linien erreichen, was Sie wollen:

Foundation.Slider.defaults.initialStart = 33; 
$(document).foundation(); 

Es ist wichtig, dass $(document).foundation() nach der Einstellung der Standardwerte, da sonst die Änderungen nicht wirksam genannt wird. $(document).foundation() zielt auf alle Foundation-Plugins auf der Seite ab, was beim ersten Laden der Seite gewünscht ist.

Wenn später Sie wollen speziell die slider Ziel, können Sie folgendes tun:

var target = document.getElementById("slidervol");  
var options = { 
    "initialStart": 33 
}; 

var elem = new Foundation.Slider($(target), options); 

Fiddle Demo