目前我正在使用默认的 Jquery slider 来更改 jVectormap 中 map 内的值,但由于样式选项有限,我不得不切换到另一个 slider 。这是工作的 Jquery slider 的代码:
$(".slider").slider({
value: val,
min: 2002,
max: 2012,
step: 1,
slide: function( event, ui ) {
val = ui.value;
mapObject.series.regions[0].setValues(data.states[ui.value]);
checkData(val);
}
});
现在我找到了一个完全符合我需要的不同 slider (ionRangeSlider: http://www.spicyjquery.com/demo,34.html),但它的工作方式与默认的 Jquery slider 不同,因此它失去了功能。这是 ionRangeSlider 的代码:
$("#ion_slider").ionRangeSlider({
value: val,
min: 2002,
max: 2012,
step: 1,
type: 'single',
hasGrid: true
});
要使用 ionRangeSlider 更改幻灯片上的值,我应该根据 slider 的文档使用 onChange 函数:
// callback is called on every slider change
onChange: function (obj) {
console.log(obj);
}
所以我现在想做的是使用 ionRangeSlider 更改 jVectormap 上的值。我的解释是这样的:
$("#ion_slider").ionRangeSlider({
value: val,
min: 2002,
max: 2012,
step: 1,
type: 'single',
hasGrid: true,
// callback is called on every slider change
onChange: function ( event, ui ) {
val = ui.value;
mapObject.series.regions[0].setValues(data.states[ui.value]);
checkData(val);
}
});
但是 - 当然 - 它会返回 ui 未定义的错误。
我的猜测是它与 Jquery UI 有关,但它包含在页面中:
有人知道如何解决这个问题吗?抱歉,我对此完全陌生。
最佳答案
谢谢大家,我已经解决了。这就是我所做的:
$("#ion_slider").ionRangeSlider({
value: val,
min: 2002,
max: 2020,
step: 1,
type: 'single',
hasGrid: true,
// callback is called on every slider change
onChange: function ( obj ) {
val = obj.fromNumber;
console.log(val);
mapObject.series.regions[0].setValues(data.states[val]);
checkData(val);
}
});
关于javascript - 在幻灯片函数中使用 jquery ui 参数的 jquery 自定义 slider (?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24349753/