自定义 jQuery Mobile Rangeslider 小部件

Question

我正在使用 jquery 移动范围滑块在混合应用程序中接受时间范围。我可以自定义 Rangeslider Widget 的事件/属性，这样我的 Widget 就像

如果不可能，有人可以为此建议替代 control/widget 吗？

Answer 1

jQM rangeslider 不支持开箱即用的时间范围。但是，您可以添加一些脚本 CSS 和几个 type="time" 输入来实现您的目标。

Working DEMO

对于 HTML，我创建了一个 table，有 1 行和 3 列。范围滑块位于中间列，而低和高时间输入分别位于第 1 列和第 3 列。中间栏随页面宽度自动拉伸。

<table id="theTimeRange">
    <tr>
        <td>
            <input data-mini="true" class="timeInp" type="time" id="t1" value="06:30" data-timeinputid="range-1a" />
        </td>
        <td>
            <div data-role="rangeslider" data-mini="true">
                <label for="range-1a"></label>
                <input type="range" name="range-1a" id="range-1a" min="0" max="1439" value="0" data-timeinputid="t1" class="timeRange" />
                <label for="range-1b"></label>
                <input type="range" name="range-1b" id="range-1b" min="0" max="1439" value="1" data-timeinputid="t2" class="timeRange" />
            </div>
        </td>
        <td>
            <input data-mini="true" class="timeInp" type="time" id="t2" value="16:00" data-timeinputid="range-1b" />
        </td>
    </tr>
</table>

我已将 class timeInp 分配给 2 type="time" 输入，并将 class timeRange 分配给 2 type="range" 输入，以便在附加事件时方便.我还使用数据属性将每次输入与其范围输入相关联（例如 data-timeinputid="t1"）。

CSS 确保 table 伸展到页面宽度。它隐藏了默认数字输入并删除了默认边距：

#theTimeRange {
    width: 100%;
}
#theTimeRange tr > td:first-child, #theTimeRange tr > td:last-child {
    width: 110px;
}
#theTimeRange input[type='number'] {
    display: none;
}
#theTimeRange .ui-rangeslider-sliders {
    margin: 0;
}

最后，我将脚本放在jQM页面的pagecreate事件中。此脚本初始化范围滑块以匹配时间输入中的时间。然后在时间输入和范围输入上都有更改处理程序，它们在时间和整数分钟之间转换以在两个方向上同步。用户可以更新时间输入或拖动滑块。

$(document).on("pagecreate", "#page1", function(){

    $(".timeRange").on("change", function(e){
        var val = $(this).val();
        var timeid = $(this).jqmData("timeinputid");
        var d = MinutesToTime(val);
        $("#" + timeid).val(d);
    });

    $(".timeInp").on("change", function(e){
        var val = $(this).val();
        console.log(val);
        var timeid = $(this).jqmData("timeinputid");
        var d = TimeToMinutes(val);
        console.log(d);
        $("#" + timeid).val(d)
        $('#theTimeRange [data-role="rangeslider"]').rangeslider("refresh");
    });

    //sync rangeslider to inputs at page create
    $(".timeInp").each(function(idx){
        var val = $(this).val();
        var timeid = $(this).jqmData("timeinputid");
        var d = TimeToMinutes(val);
        $("#" + timeid).val(d)            
    });
    $('#theTimeRange [data-role="rangeslider"]').rangeslider("refresh");

});

function MinutesToTime(val){
    var hours = parseInt( val / 60 );
    var min = val - (hours * 60);
    var time = (hours < 10 ? '0' + hours: hours) + ':' + (min < 10 ? '0' + min : min);
    return time;
}

function TimeToMinutes(val){
    var res = val.split(":");
    var h = parseInt(res[0]);
    var m = parseInt(res[1]);
    return (h * 60) + m;
}

Another link to the DEMO

自定义 jQuery Mobile Rangeslider 小部件

Customizing jQuery Mobile Rangeslider Widget

jquery-mobile