3

Bootstrap Alerts ボックスを使用していますが、これらのボックスが閉じられているかどうかを「記憶」したいと考えています。このようにして、ユーザーがメンバー エリアにログインし、アラートを閉じます。彼らが次にサイトにアクセスしたとき、アラートはまだ消えています。

これを行う方法はありますか？

<div class="alert-message success" data-alert="alert">
<a class="close" data-dismiss="alert" href="#">&times;</a>When I click &times; I'd like this to never appear again.</div>
4

2 に答える 2

4

おそらく、その設定をCookieまたはサーバー自体に保存する必要があります。良い読み物は別のSOスレッドで見つけることができます。

クッキーを保存するために基本的に、あなたがしなければならないことはあなたのコードの周りにjavascriptを実装することです。簡単にするために、jQueryとjQuerycookieプラグインを使用します。

// jQuery pulled from Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
// jQuery cookie plugin. You will have to download it on your own: https://github.com/carhartl/jquery-cookie
<script src="/path/to/jquery.cookie.js"></script>
// jQuery action here
<script>
    function runOnLoad(){
        if($.cookie('alert-box') == null) {
            $.cookie('alert-box', 'open', { expires: 7 });
        } else if($.cookie('alert-box') == 'close') {
            $(".close").hide();
        }

        // php psuedo code here (if you are using the server option)
        <?php
            if(check database for hide option == true){
                echo '$(".close").hide();
            }
        ?>
    }
    function hideMe(){
        $.cookie('alert-box', 'close', {expires:7 });
        $(".close").hide();
    }
</script>

<body onload="runOnLoad()">
    <div class="alert-message success" data-alert="alert">
        <a class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()" >&times;</a>When I click &times; I'd like this to never appear again.
    </div>
</body>

サーバーオプションを使用している場合は、hideMe.phpを次のようにコーディングする必要があります。

  1. データベース内のテーブルの非表示オプションを設定します。つまり、userPreferenceをtrueに設定します。
  2. ユーザーを、表示しているページにリダイレクトします。

免責事項：これらのコードは、それがどのように行われるかについてのアイデアを提供するためのものです。ただし、コードをテストしなかったため、そのまま動作するという保証はありません。

ノート：

  1. jQueryのhideを利用しました。それを読んでください。
  2. jQuery cookieプラグインの詳細については、こちらをご覧ください。
于 2012-04-14T06:49:32.377 に答える
0

私は自分のウェブサイトの基本的なソリューションを作成しました。これは私のニーズに適しています。

  • livequery プラグインを使用して、アラート要素が DOM に存在するのを待ちました
  • スクリプトは、アラート div で一意の値を持つ属性 data-id を探しています。これは後で Cookie またはデータベースに保存するために使用され、オプションにすることができます。
  • Cookie プラグインを使用してクローズド アラート データ ID を保存しました。この一意の値はオプションで、html 属性として動的に設定できます。保存方法が大幅に改善されたとしても (1 つの Cookie 内に複数のアラートをオブジェクトとして保存するために json を使用するなど)、これは私のニーズには十分です。

DOM の準備ができた後に使用する JS:

//bind to close alerts link
$('.alert a.close').livequery(function()
{
    $(this).bind('click', function()
    {
        var id = $(this).parents('.'+$(this).data('dismiss')).data('id');

        if(id)
        $.cookie('alert-'+id, 'closed', { path: '/' });
    });
});

//hide closed alerts
$('.alert').livequery(function()
{
    var id = $(this).data('id');

    if($.cookie('alert-'+id))
    $(this).hide();
});
于 2012-11-26T20:20:54.943 に答える