jquery-ui - 带有 jQ​​uery UI slider 的 Knockout .js

原文 标签 jquery-ui knockout.js

假设我有以下链接到文本框的 jQuery UI slider 。

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

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 的值,并使 slider 显示为最大值。

最佳答案

您可以只更新 slidechange 中的可观察值。如果 observable 的值小于 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 demo.

关于jquery-ui - 带有 jQ​​uery UI slider 的 Knockout .js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13121296/

相关文章:

javascript - knockout DatePicker 绑定(bind)项目不会禁用 DatePicker

javascript - 包含多个JQuery插件的问题

html - Bootstrap 表使 TR 中的显示元素不展开

javascript - 将值传递给对象内的 KO 计算 observable

knockout.js - 有没有办法使用 Chrome 调试器检查 knockout 的可观察对象?

jquery - (jquery-ui)具有设置CSS颜色的元素的toggleClass颜色过渡

javascript - 缩放的 div 不能在所有父 div 上拖动

javascript - jQuery UI Accordion 插件和显示隐藏切换在所有 Accordion div 上激活

javascript - 获取组件的异步 View 模型

javascript - Uncaught ReferenceError : Unable to process binding with Ajax