ペインの状態の保存

クイックスタートの例を基に、jquery.cookie.js を使用して開いているすべてのペインの配列を含む Cookie を保存し、その Cookie を使用して、ページを再ロードする際に各ペインの状態を設定できます。

注意：Cookie を機能させるには、サーバーが必要です。このため、この操作をお使いのローカルマシンで試行する場合は、IIS などのお気に入りの Web サーバーでサイトを作成し、HTML ページをホストする必要があります。

GitHub から、jquery-cookieをダウンロードし、jquery.cookie.js ファイルを HTML ファイルと同じディレクトリに保存します。
HTML ファイルの <head> セクションで、次のスクリプトを jQuery References セクションに追加します。
レファレンス
コードのコピー
<script src="jquery.cookie.js" type="text/javascript"></script>

レファレンス	コードのコピー
<script src="jquery.cookie.js" type="text/javascript"></script>

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下を実行するスクリプトに置き換えます。

すべてのペインを閉じることができ、一度に複数のペインを開くことができるように、requireOpenedPane オプションを false に設定します。
selectedIndexChangedイベントで、アクティブな（開いた）状態のすべてのインデックスの配列を作成します。
インデックスの配列を Cookie に渡します。
初期状態で、すべてのペインが開かないように、selectedIndexオプションを -1 に設定します。
Cookie を使用してインデックスの配列を wijaccordion に戻し、以前に開かれていた同じペインをactivateします。

ペインの状態スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h2", requireOpenedPane: false, selectedIndexChanged: function (e, args) { var activeHeaders = $($.find("#accordion .wijmo-wijaccordion-header.ui-state-active")); var indices = ""; activeHeaders.each(function (i, o) { indices += $(o).index(".wijmo-wijaccordion-header") + ";"; }); $.cookie("the_cookie", indices); }, selectedIndex: -1 }); var indices = $.cookie("the_cookie"), i, k; if (indices) { indices = indices.split(";"); for (i = 0; i < indices.length; i++) { if (indices) { k = parseInt(indices[i]); if (isFinite(k)) { $("#accordion").wijaccordion("activate", k); } } } } }); </script>

ペインの状態スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion({
            header: "h2", 
            requireOpenedPane: false,
            selectedIndexChanged: function (e, args) {
                var activeHeaders = $($.find("#accordion                     .wijmo-wijaccordion-header.ui-state-active"));
                var indices = "";
                activeHeaders.each(function (i, o) {
                    indices += $(o).index(".wijmo-wijaccordion-header") + ";";
                });
                $.cookie("the_cookie", indices);
            },
            selectedIndex: -1
        });
        var indices = $.cookie("the_cookie"), i, k;
        if (indices) {
            indices = indices.split(";");
            for (i = 0; i < indices.length; i++) {
                if (indices) {
                    k = parseInt(indices[i]);
                    if (isFinite(k)) {
                        $("#accordion").wijaccordion("activate", k);
                    }
                }
            }
        }
    });
</script>

HTML ファイルを保存し、それをブラウザで開きます。アコーディオンは、すべてのペインが閉じられた状態で初期化され、アコーディオンから移動して元に戻るか、再ロードすると、直前に開かれていた同じペインが再度開かれます。

関連トピック

参照