Question

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

关于滑块，我将通过aria-contro l连接的输入编号修改为滑块。问题是滑块不会更新。如何更新滑块？

有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

首先，就display_selector而言，attribute不是有效的slider，所以你可以摆脱它。我假设您正在调用$(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

基础6滑块更新页面加载

1 个答案: