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 线程中找到很好的阅读。

用于存储 cookie 基本上，您要做的就是围绕您的代码实现 javascript。为简单起见，我使用 jQuery 和一个 jQuery cookie 插件。

// 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 或 db 上，并且可以是可选的。
  • 我已经使用 cookies 插件来存储关闭的警报数据 ID，这个唯一值可以是可选的，并且可以动态地设置为 html 属性。即使存储方法可以改进很多（例如使用 json 将多个警报作为对象存储在一个 cookie 中），这对我的需求也很好。

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 回答