0

jQuery Cookie プラグインをスライド トグル スクリプトに実装しようとしていますが、今のところ成功していません。これが私のコードです（Cookieの実装なし）：

jQuery:

$(document).ready(function() {
  $('a.toggle').click(function() { 
   var id = $(this).attr('name');
   $('#module' + id).slideToggle('fast');
   $('a.toggle[name='+id+']').toggle();
   return false; 
  });
});

HTML:

<a class="toggle" name="1" href="#">- Hide</a> 
<a class="toggle hidden" name="1" href="#">+ Show</a>

<div id="module1"><p>Hello World</p></div>

jQuery Cookie プラグインを既存のコードに実装して、開いている/閉じている状態を記憶するのが簡単かどうか誰でも知っていますか?

ありがとうございました。

4

1 に答える 1

8

jQuerycookieプラグインは非常に使いやすいです。基本的に、トグルを使用する場合は、Cookieを介してフラグを設定する必要があります。

サイト全体に値を設定するには、次のような簡単なステートメントが機能します。

$.cookie("currentToggle", "on", {path: "/"});

そして、必要なときに値を取得するには、次を使用します。

var currentState = $.cookie("currentToggle");

トグルをどのように使用するかは正確にはわかりませんが、たとえば、複数のページにわたって状態を追跡する必要があるとします。トグルが起動したときにCookieを簡単に設定して、どの状態（オン/オフなど）であるかを追跡できます。他のページの読み込み中に、一般的なスクリプトがCookieをチェックし、フラグに基づいてトグルを設定できます。これにより、サイトがページ間で以前の状態を「記憶」しているように見えます。

とにかくサンプル使用だけです。お役に立てれば。

jQuery Cookieプラグイン：http：//www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

編集して実装サンプルを提供します。

これが機能するサンプル実装です。jQueryとjQuerycookieプラグインを参照し、1つのcss定義を指定する必要があります。すべてのスクリプトとCSSが各ページで定義されている場合、複数のページで機能します。

Javascript：

$(document).ready(function() {

    var button = $('#hideButton');

    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') {
        togglePanel(button, false);
    }
    else {
        togglePanel(button, true);
    }

    //handle the clicking of the show/hide toggle button
    button.click(function() {
        //toggle the panel as required, base on current state
        if (button.text() === "+Show") {
            togglePanel($(this), true);
        }
        else {
            togglePanel($(this), false);
        }
    });

});

function togglePanel(button, show) {

    var panel = $('#panel');

    if (show) {
        panel.removeClass('hidden');
        button.text('-Hide');
        $.cookie('currentToggle', '', { path: '/' });
    }
    else {
        panel.addClass('hidden');
        button.text('+Show');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}

CSS：

.hidden
{
    display: none;
}

マークアップ：

<a id="hideButton" href="javascript:;">-Hide</a>
<div id="panel">
    <p>Hello World</p>
</div>

それを実装するためのより効率的な方法はおそらくたくさんありますが、概念実証のために上記はうまく機能します。

于 2009-12-30T20:35:43.533 に答える