Foundation 6 kaydırıcı güncelleme on sayfa

Question

Cihaz parametrelerini ayarlamak için kullanıyorum bir html sayfasında bir Foundation 6 Slider var. Sayfa yüklenirken, bir xml dosyasındaki parametreleri okudum ve sayfayı buna göre ayarladım.

Kaydırıcıyla ilgili olarak, aria-contro l aracılığıyla bağlı olan giriş numarasını kaydırıcıya değiştiriyorum. Sorun, kaydırıcının güncellenmemesidir. Kaydırıcıyı nasıl güncelleyebilirim? Orada

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> 

ve yük formu güncellemek için kullanın burada javascript:

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

Birincisi, display_selector bildiğim kadarıyla bir slider olduğu gibi geçerli bir attribute değil endişe, böylece ondan kurtulabilirsiniz. Kaydırıcıyı başlatmak için $(document).foundation()'u aradığınızı mı söylüyorsunuz ?, eğer değilse, body'un alt kısmından emin olun.

slider 'un değerini güncellemek için Foundation.Slider.defaults.intialStart kullanın. Foundation nesnesi, tüm mevcut eklentileri temsil eden özellikler içerir. Her eklenti, başlatmadan önce geçersiz kılınabilecek çok sayıda özellikten oluşan defaults nesnesine sahiptir.

Bu iki satır İstediğinizi elde edecek:

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

O $(document).foundation() yürürlüğe girmeyecek şekilde aksi değişiklikleri öntanımlıların ayarlandıktan sonra denir önemlidir. $(document).foundation(), sayfadaki tüm Foundation eklentilerini hedefleyecektir; bu, ilk sayfa yüklemesinde istediğinizdir. Seni daha sonra özel olarak slider hedeflemek istiyorsanız

, aşağıdakileri yapabilirsiniz:

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

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

Fiddle Demo