Question

我正在使用jquery mobile rangelider来接受混合应用中的时间范围。我可以自定义Rangeslider Widget的事件/属性，以便我的Widget可以像 enter image description here

如果不可能，任何人都可以为此建议一个替代控件/小部件吗？

Answer 1

jQM rangelider不支持开箱即用的时间范围。但是，您可以添加一些脚本，CSS和几个类型=＆＃34; time＆＃34;投入以实现目标。

正在使用 DEMO

对于HTML，我创建了一个包含1行和3列的表。 rangelider进入中间列，而低和高时间输入分别进入第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>

我已将类timeInp分配给2类型=＆＃34;时间＆＃34;输入和类timeRange到2类型=＆＃34;范围＆＃34;附加事件时方便输入。我还使用数据属性将每次输入与其范围输入相关联（例如data-timeinputid =＆＃34; t1＆＃34;）。

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

#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事件中。此脚本初始化rangelider以匹配时间输入中的时间。然后在时间输入和范围输入上都有更改处理程序，它们在时间和整数分钟之间进行转换，以便在两个方向上同步。用户可以更新时间输入，也可以拖动滑块。

$(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;
}

指向 DEMO
的另一个链接

自定义jQuery Mobile Rangeslider Widget

1 个答案: