jQuery UI Slider - 需要记住浏览器上的值"Back"

Question

我在高级搜索表单中使用jQuery UI Slider(我使用Range Slider来精确).我用它来按持续时间(按分钟)过滤视频.

到目前为止,它运作良好.

默认值为5到55.

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

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

这是一个工作小提琴,可以看到我的Slider在行动: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 ] );

在幻灯片上

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