繁体   English   中英

页面加载时 Foundation 6 滑块更新

[英]Foundation 6 slider update on page load

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

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

有 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)
}

首先,就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);

小提琴演示

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM