Foundation 6 滑块在页面加载时更新

Question

我在 html 页面上有一个 Foundation 6 Slider，用于设置设备参数。在页面加载时，我从 xml 文件中读取参数并相应地设置页面。

关于滑块，我修改了通过aria-control连接到滑块的输入数字。问题是滑块不更新。如何更新滑块？

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

这里是我用来在加载时更新表单的 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

首先，就 slider 而言，display_selector 不是有效的 attribute，因此您可以删除它。我假设您正在调用 $(document).foundation() 来初始化滑块？如果没有，请确保您在 body.

的底部这样做

要更新 slider 的值，请使用 Foundation.Slider.defaults.intialStart。 Foundation 对象包含表示所有可用插件的属性。每个插件都有一个 defaults 对象，其中包含许多您可以在初始化前覆盖的属性。

这两行就可以达到你想要的效果：

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

设置任何默认值后调用 $(document).foundation() 很重要，否则更改将不会生效。 $(document).foundation() 将针对页面上的所有 Foundation 插件，这是您在初始页面加载时想要的。

如果稍后您想要专门针对 slider，您可以执行以下操作：

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

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

Fiddle Demo

Foundation 6 滑块在页面加载时更新

Foundation 6 slider update on page load

html

javascript

jquery

slider

zurb-foundation