3

高度な検索フォームでjQueryUIスライダーを使用しています（正確には範囲スライダーを使用しています）。継続時間（分単位）でビデオをフィルタリングするために使用しています。

これまでのところ、それはうまく機能しています。

デフォルト値は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 に答える