使用淘汰賽JS與jQuery UI的滑塊

我試圖找出如果淘汰賽JS會很好地工作以下問題：使用淘汰賽JS與jQuery UI的滑塊

我有我要鏈接到文本框多個滑塊。

當文本框被更改時，相應的滑塊必須更新爲新值，反之亦然。

在更改滑塊值或文本框時，需要調用一個函數，該函數使用來自所有文本框的輸入來計算結果。

我有我的快速和骯髒的jQuery解決方案here。

使用knockout js以更優雅的方式實現相同的結果會很容易嗎？

我想我需要創建一個像它的自定義綁定處理程序jQuery UI datepicker change event not caught by KnockoutJS

來源

2012-10-12 woggles

您可以使用此庫：http://gvas.github.io/knockout-jqueryui/slider.html –

這裏做的是一個例子：http://jsfiddle.net/jearles/Dt7Ka/

我用一個自定義綁定到淘汰賽整合了jQuery UI的滑塊和使用捕獲輸入並計算淨額。

<h2>Slider Demo</h2> 

Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" /> 
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div> 

Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" /> 
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div> 

Net: <span data-bind="text: net"></span>

視圖模型

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); 
    } 
}; 

var ViewModel = function() { 
    var self = this; 

    self.savings = ko.observable(10); 
    self.spent = ko.observable(5); 
    self.net = ko.computed(function() { 
     return self.savings() - self.spent(); 
    }); 
} 

ko.applyBindings(new ViewModel());

來源

2012-10-12 10:47:22

謝謝！比我的jQuery sln更優雅 – woggles

我看到它也限制了文本框的輸入到滑塊的範圍...真棒:)有沒有辦法阻止用戶輸入除數字之外的任何內容？當一個字符被放置它它輸出NaN – woggles

我已經更新我的代碼上面，並提琴，更新前檢查數字。如果NaN將值重置爲0. –

我知道這是前幾天，但我做了一些調整，以約翰Earles代碼：

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, allBindingsAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 
    if (isNaN(value)) value = 0; 
    $(element).slider("option", allBindingsAccessor().sliderOptions); 
    $(element).slider("value", value); 
} 
};

之所以這樣s是如果你使用改變的選項（fx另一個可觀察的），那麼即使你想這樣做，它也不會影響滑塊。

來源

2013-08-20 09:33:13

@John Earles和@Michael Kire Hansen：謝謝你的精彩解決方案！

我使用了Michael Kire Hansen的高級代碼。我將滑塊的「max：」選項綁定到ko.observable，結果在這種情況下滑塊不能正確更新值。示例：假設滑塊的最大值爲25，並且您將最大值更改爲100，則滑塊停留在最右邊的位置，表示它處於最大值（但值仍然是25，而不是100）。只要你滑動一個指向左邊，你得到的值更新爲99

解決方案：中的「更新」部分的最後兩行只需切換到：

$(element).slider("option", allBindingsAccessor().sliderOptions); 
$(element).slider("value", value);

這種變化首先是選項，然後是價值，它就像魅力一樣。

來源

2014-05-24 12:51:49

我已更新我的答案與此修復程序，謝謝:) –

非常感謝您的幫助，我需要在我的情況下使用一系列滑塊所以這裏是一個擴展@約翰Earles和@邁克爾基雷漢森

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

    $(element).slider("option", allBindingsAccessor().sliderOptions); 
    $(element).slider("values", 0, value.Min()); 
    $(element).slider("values", 1, value.Max()); 
} 
};

，然後將HTML陪它

<div id="slider-range" 
      data-bind="sliderRange: { Min: 0, Max: 100 }, 
           sliderOptions: { 
            range: true, 
            min: 0, 
            max: 100, 
            step: 10, 
            values: [0, 100] 
           }"></div>

來源

2017-03-29 10:00:38

使用淘汰賽JS與jQuery UI的滑塊

回答

相關問題