使用jQuery UI滑子淘汰出.js [英] Knockout .js with jQuery UI slider

问题描述

说我有以下链接到文本框的jQuery UI滑块.

Say I have the following jQuery UI sliders that are linked to a textbox.

是否可以允许用户在文本框中输入大于滑块值的值(并将滑块设置为max)?

Is it possible to allow the user to enter values in the textbox that are greater than the sliders value (and set the slider to max)?

ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
$(element).slider(options);
ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
    var observable = valueAccessor();
    observable(ui.value);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
    $(element).slider("destroy");
});
ko.utils.registerEventHandler(element, "slide", function (event, ui) {
    var observable = valueAccessor();
    observable(ui.value);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(value)) value = 0;
$(element).slider("value", value);
}
};

在此示例中: http://jsfiddle.net/jearles/Dt7Ka/12/我希望能够在文本框中保存超过100个的值，并使滑块显示为其最大值.

In this example: http://jsfiddle.net/jearles/Dt7Ka/12/ I would like to be able to save values over 100 in the textboxes and have the sliders appear at their max value.

推荐答案

如果可观察值小于options.max，则只能更新slidechange事件中的可观察值:

You can do with only updating the observable value in your slidechange event if the observable's value is less then options.max:

ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
    var observable = valueAccessor();
    var currentMax = $(element).slider("option", "max"); 
    if (observable() <= currentMax)
         observable(ui.value);
});

JSFiddle演示.

这篇关于使用jQuery UI滑子淘汰出.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！