[英]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 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.