jquery 滑块、时间选择器和保留时间.. [英] jquery slider, time picker and reserved times..

问题描述

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

I am using a jquery slider to pick a start and end time That is fine, but I need to add restrictions to it. Basically, I've got a window of availability that I need to chip away at. So in my example: http://madeeasyfor.me/stackoverflow/time_pick_test_1.html

(我已经注释了验证功能，因此您可以看到滑块，代码具有所有脚本的绝对路径，因此请随时获取查看源转储以供本地使用)

(I've commented the validation function so you can see the slider, the code has absolute paths to all scripts so feel free to get a view source dump for local use)

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

I've got a 24 clock. With a dynamically generated PHP script, I want to add various booked times.. so when the user tries to select a pre booked time, they'll get an error (pop up, whatever). For now, I'm hard coding my booked times.

我这辈子似乎无法让滑块识别所选的预定时间.

I can't for the life of me seem to get the slider to recognise the pre booked times selected.

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

If I'm not clear about anything, please ask... I could just do the checks in PHP once the user has selected a time, but I'd like the user to be instantly made aware. (Ideally, I'd like to colour the slide bar to flag the prebooked times.. but that's another issue... ;-p

三...

推荐答案

尝试在 jQuery UI 中使用 'slide' 事件 (http://jqueryui.com/demos/slider/#event-slide).当用户滑动手柄时，会触发滑动事件.在幻灯片事件中可以检查选择的时间是否是预先预订的，如果为真，则可以返回假.当滑动事件返回 false 时，用户无法将手柄滑动到该点.

Try using the 'slide' event in jQuery UI (http://jqueryui.com/demos/slider/#event-slide). When the user slides the handle, the slide event is triggered. In the slide event you can check if the selected time is pre booked, if true, you can return false. When the slide event returns false, the user isn't possible to slide the handle to that point.

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

For example: This prevents the user from selecting something between 40 and 50:

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

这篇关于jquery 滑块、时间选择器和保留时间..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！