2

これが可能かどうかはわかりませんが、私が達成したいことを達成するために誰かが私を正しい方向に向けてくれることを願っています.

Twitter からのブートストラップに関する Web サイトを構築しています。セクション ボックスでブートストラップの折りたたみを使用します。このボックスはデフォルトでは折りたたまれていませんが、ユーザーがボタンを押してボックスを折りたたむと、ページを更新した後でも、この情報をクライアント側の何らかのキャッシュに保存したいと考えています。

ユーザーがそれらを折りたたんで、明日戻ってくるとしましょう。ユーザーがボタンをもう一度押すまで、それらは折りたたまれます。

これには、追加されたクラス以外にもあると思われるため (とにかくデフォルトのものを使用します)、イントラネットの外では利用できないため、プロジェクトにリンクすることはできません。

ただし、これはjsfiddleのブートストラップからのコピーです。

http://jsfiddle.net/B43hy/

どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

14

Cookieまたは HTML5 LocalStorageのいずれかを使用して試すことができます。これらのメカニズムは両方とも、クライアント側のデータを保存します。それらのいずれかを選択する必要があります (Cookie の場合は、get/set 関数を記述します)。

次に、各折りたたみ要素に、サイト全体で一意の ID を指定して、他のページの要素と競合しないようにする必要があります。ユーザーが要素を折りたたむたびに、ID をクライアントに保存します。ユーザーが要素の折りたたみを解除するたびに、ストレージから ID を削除します。次のように、Bootstrap がスローするイベントを使用できます。

$('.collapse').on('hidden', function() {
      // store this.id
}).on('shown', function() {
      // delete this.id
});

ページをロードするときは、$( document ).ready関数内に次のチェックを追加する必要があります。

$(document).ready(function(){
    $(".collapse").collapse().each(function(){
        if( isStored( this.id ) ) {
            $( this ).collapse( 'hide' );
        }
    });
});​

これにより、折りたたみ要素のいずれかを閉じる必要があるかどうかがチェックされ、閉じる必要がある場合は非表示になります。このisStoredメソッドは、Cookie または LocalStorage をチェックして ID が存在するかどうかを確認するメソッドである必要があります。

サイトにこれらの折りたたみが多数ある場合は、おそらくそれらに多くの ID を使用することになります。この場合、クッキーはリクエストごとにサーバーに送信され、実際の目的もなく接続が遅くなるため、不適切なオプションになる可能性があります。LocalStorage はこの欠陥の影響を受けず、全体的に使いやすくなっていますが、(多くの HTML5 機能と同様に) 新しいブラウザーでのみ機能します。

于 2012-08-05T17:52:52.033 に答える