Question

我在高级搜索表单中使用jQuery UI Slider（我正确地使用Range Slider）。我用它来按持续时间（按分钟）过滤视频。

到目前为止，它运作良好。

默认值为5到55。

现在我想要做的是：当我将其更改为20-30时，提交表单，查看结果。当我在浏览器上点击“返回”时，我希望值为20-30，而不是默认值。所以，我基本上希望滑块记住我回去时选择的值。

首先，是否可以这样做？如果是这样，我需要帮助，因为我不知道如何！

这是一个工作小提琴，可以看到我的滑块：http://jsfiddle.net/nbjgH/

这是我的html表单：

<form id="advancedSearch" name="advancedSearch" class="search" action="/advancedsearchrun/">
    <input type="text" name="query" autofocus="autofocus" value="{{ query|default('') }}" >

    <div class="slider-time">
        <label for="timeRange">Filter by duration:</label>
        <input type="text" id="timeRange" />
        <input type="hidden" id="min_minutes" name="min_minutes" value="0" />
        <input type="hidden" id="max_minutes" name="max_minutes" value="5" />
    </div>

        <input class="not_rounded_right float-left" type="submit" value="Search">
</form>

Answer 1

您可以使用jQuery cookie以非常干净的方式实现此目的。

加载cookie，或者设置为null的默认值：

if ($.cookie('min')==null){
    $.cookie('min',5);
}
if ($.cookie('max')==null){
    $.cookie('max',55);
}

通

values: [ $.cookie('min'), $.cookie('max')]

到你的滑块构造函数

火

$( "#min_minutes" ).val(  ui.values[ 0 ] );
$( "#max_minutes" ).val(  ui.values[ 1 ] );

幻灯片上的

DEMO
如果您访问演示，请更改滑块，然后再次访问，或刷新...它将保存值。

Answer 2

您可以使用cookie，localStorage或sessionStorage来保存上次提交的范围。您首先尝试读取存储的值：

var getLastRange = function(){
    // return data from cookie/local or session storage
};

$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 60,
    values: getLastRange() || [ 5, 55 ],
    ...
});

Answer 3

您没有指定所需解决方案的范围，但我会使用PHP来解决此类问题。提交表单时，可以将变量保存到$ _SESSION中，然后在带滑块的页面上检查这些变量是否可用，如果可以，可以将它们传递给初始化滑块的javascript

jQuery UI Slider - 需要记住浏览器上的值＆＃34;返回＆＃34;

3 个答案: