jquery slider 、时间选择器和保留时间..

Question

我使用 jquery slider 来选择开始和结束时间很好，但我需要对其添加限制。基本上，我有一个可用的窗口，我需要一点一点地削减。所以在我的例子中: http://madeeasyfor.me/stackoverflow/time_pick_test_1.html

(我对验证函数进行了注释，以便您可以看到 slider ，代码具有所有脚本的绝对路径，因此请随意获取查看源转储以供本地使用)

我有一个 24 小时。使用动态生成的 PHP 脚本，我想添加各种预订时间.. 因此，当用户尝试选择预先预订的时间时，他们会收到错误(弹出，无论如何)。目前，我正在对我的预订时间进行硬编码。

我似乎一辈子都无法让 slider 识别所选的预订时间。

如果我有什么不清楚的地方，请询问...一旦用户选择了时间，我就可以在 PHP 中进行检查，但我希望用户能够立即意识到。(理想情况下，我想为滑动条着色以标记预订时间..但这是另一个问题...;-p

特里斯...

Answer 1

尝试在 jQuery UI 中使用“幻灯片”事件 ( http://jqueryui.com/demos/slider/#event-slide )。当用户滑动 handle 时，会触发滑动事件。在幻灯片事件中可以检查所选时间是否已被预订，如果为 true，则可以返回 false。当滑动事件返回 false 时，用户无法将 handle 滑动到该点。

例如:这可以防止用户选择 40 到 50 之间的内容:

$('#slider').slider({
    range: true,
    values: [17, 67],
    slide: function(event, ui) {
        if(ui.value > 40 && ui.value < 50){
            return false;
        }
    }
});