Using Twitter Bootstrap, how can you “remember” us

2020-06-23 08:05发布

站内问答 / 前端开发
504 2 5

I am using the Bootstrap Alerts boxes, and would like these boxes to "remember" if they have been closed. This way when a user logs in to the members area and closes an alert; the next time they visit the site the alert is still gone.

Is there any way to do this?

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

2条回答
劫难
2楼-- · 2020-06-23 08:35

You probably will have to store that preference in the cookies or on the server itself. A good read can be found in another SO thread.

For storing cookies Basically, what you have to do is to implement javascript around your codes. For simplicity, I utilise jQuery and a jQuery cookie plugin.

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

If you are using the server option, you have to code hideMe.php to:

  1. set the hide option in a table in your database, i.e. userPreference to true
  2. redirect the user back to the page that he is viewing.

Disclaimer: These codes are to give you an idea how it can be done. However, there is no gaurantee that it will work as it is, as I did not test the code.

Notes:

  1. I utilised jQuery's hide. Read on it.
  2. You can read more about jQuery cookie plugin here.
查看更多
0人赞 添加讨论(0) 举报
做自己的国王
3楼-- · 2020-06-23 08:42

I wrote a basic solution for my website, that works well for my needs:

  • I've used the livequery plugin to wait for the alert elements to exist on the DOM
  • The script is looking for an attribute data-id on the alert div, with an unique value. This will be used later for storing on the cookie or db, and can be optional.
  • I've used the cookies plugin to store the closed alert data id, this unique value can be optional, and dinamically set as an html attribute. Even if the storing method can be improved a lot (like using json for storing multiple alerts inside one cookie as objects), this is just fine for my needs.

The JS to use after the DOM is ready:

//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();
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)