文章/答案/技术大牛

发布

社区首页 >问答首页 >Foundation6页面加载滑块更新

问Foundation6页面加载滑块更新
EN

Stack Overflow用户

提问于 2016-03-24 15:08:26

回答 1查看 436关注 0票数 1

我在html页面上有一个Foundation6Slider，用于设置设备参数。在页面加载时，我从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)
}

javascript

jquery

html

slider

zurb-foundation

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-24 21:19:47

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

小提琴演示

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36203484

复制

相似问题

问Foundation6页面加载滑块更新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Foundation6页面加载滑块更新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Foundation6页面加载滑块更新
EN