3

我在高级搜索表单中使用 jQuery UI 滑块（准确地说，我使用的是范围滑块）。我用它来按时长（按分钟）过滤视频。

到目前为止，它工作得很好。

默认值为 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>
4

3 回答 3

6

您可以使用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 ] );

在幻灯片上

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

于 2012-06-14T16:22:17.893 回答
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 ],
    ...
});
于 2012-06-14T16:12:38.893 回答
1

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

于 2012-06-14T16:01:22.940 回答