淘汰赛js jQuery范围滑块& amp; amp; amp;2路输入 [英] Knockout js jquery range slider && 2 inputs
本文介绍了淘汰赛js jQuery范围滑块& amp; amp; amp;2路输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要一些帮助.我有一个代码 http://jsfiddle.net/ZNvWR/19/.我是淘汰赛的新手,找不到任何解决方案.
I need a some help. I have a code http://jsfiddle.net/ZNvWR/19/. I'm newbie in knockout, and I can't find any solution.
那么,如何重写此代码以获取有效的输入(输入中的更改值会更改滑块的值)?
So, how to rewrite this code for getting working inputs (change values in inputs changes slider values)?
<div data-bind="jqSlider: percent, jqOptions: { min: 0, max: 100, range:true }"></div>
<hr/>
Percent: <input data-bind="value: percent()[0]" />
Percent: <input data-bind="value: percent()[1]" />
ko.bindingHandlers.jqSlider = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize the control
var options = allBindingsAccessor().jqOptions || {};
$(element).slider(options);
//handle the value changing in the UI
ko.utils.registerEventHandler(element, "slide", function() {
//would need to do some more work here, if you want to bind against non-observables
var observable = valueAccessor();
observable($(element).slider("values"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).slider("destroy");
});
},
//handle the model value changing
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).slider("values", value);
}
};
var viewModel = {
percent: ko.observableArray([10,50])
};
ko.applyBindings(viewModel)
推荐答案
我只是用滑块帮助了另一个SO用户,可以像这样更改它以做您想要的
I just helped antoher SO user with a slider, it can be altered like this to do what you want
<input data-bind="value: min" /><input data-bind="value: max" /><div data-bind="slider: { min: min, max: max }, sliderOptions: {min: 0, max: 100, step: 1}"></div>
这篇关于淘汰赛js jQuery范围滑块& amp; amp; amp;2路输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文