Question

我正在使用Bootstrap Alerts框，并希望这些框能够记住＆＃34;如果他们已经关闭这样，当用户登录到成员区域并关闭警报时;下次他们访问该网站时，警报仍然消失。

有没有办法做到这一点？

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

Answer 1

您可能必须将该首选项存储在cookie中或服务器本身上。可以在 another SO thread 中找到一个好的阅读。

用于存储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编码为：

在数据库的表中设置hide选项，即userPreference为true
将用户重定向回他正在查看的页面。

免责声明：这些代码旨在让您了解如何完成此操作。但是，由于我没有测试代码，因此没有任何保证可以正常工作。

注意：

我使用了jQuery的hide。继续阅读。
您可以阅读有关jQuery cookie plugin here。

Answer 2

我为我的网站编写了一个基本解决方案，该解决方案非常适合我的需求：

我使用livequery plugin等待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();
});

使用Twitter Bootstrap，您如何“记住”用户操作？

2 个答案: