Question

我正在使用WOAHbar，它是Hello Bar的免费替代品。我明白了：

http://blog.jobdeals.com/2011/12/free-hellobar-com-alternative-source-code/

真的太棒了。我唯一要做的就是记住当用户访问另一个帖子或页面时用户选择的状态。我知道你可以用饼干做到这一点，我只是不知道如何做。这是jQuery：

<script type="text/javascript">
var stub_showing = false;

function woahbar_show() { 
    if(stub_showing) {
      $('.woahbar-stub').slideUp('fast', function() {
        $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
        $('body').animate({"marginTop": "2.4em"}, 250);
      }); 
    }
    else {
      $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
      $('body').animate({"marginTop": "2.4em"}, 250);
    }
}

function woahbar_hide() { 
    $('.woahbar').slideUp('fast', function() {
      $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);  
      stub_showing = true;
    }); 

    if( $(window).width() > 1024 ) {
      $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body
    }
}

$().ready(function() {
    window.setTimeout(function() {
    woahbar_show();
 }, 5000);
});
</script>

这是HTML：

    <div class="woahbar" style="display:none">
    <span>
    Want access to the largest inventory of storage auctions online?  <a class="woahbar-link" href="http://storageunitauctionlist.com/register-signup.php" target="_blank">Sign Up Today!</a>
    </span>
    <a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="<?php bloginfo("template_url"); ?>/images/woahbar-up-arrow.png"></a>
</div>
<div class="woahbar-stub" style="display:none">
    <a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="<?php bloginfo("template_url"); ?>/images/woahbar-down-arrow.png"></a>
</div>

非常感谢任何帮助！

编辑：

我尝试使用jQuery Cookie插件添加Cookie。我是jQuery的新手，所以我不确定我做错了什么：

<script type="text/javascript">
var stub_showing = false;
var state = 'updown';

function woahbar_show() { 
    if(stub_showing) {
      $('.woahbar-stub').slideUp('fast', function() {
        $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
        $('body').animate({"marginTop": "2.4em"}, 250);
      }); 
    }
    else {
      $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
      $('body').animate({"marginTop": "2.4em"}, 250);
    }
}

$.cookie('state', 'updown', { expires: 7 });

function woahbar_hide() { 
    $('.woahbar').slideUp('fast', function() {
      $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100);  
      stub_showing = true;
    }); 

    if( $(window).width() > 1024 ) {
      $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body
    }
}

$().ready(function() {
    window.setTimeout(function() {
    woahbar_show();
 }, 5000);


});
</script>

Answer 1

您可以使用jQuery cookie plugin并将state的值存储在Cookie中，如：

脚本顶部的

声明要用于存储cookie的变量，如：

var state; // declare the variable

稍后，代码中的某个位置会在用户输入state

后设置值

$.cookie('state', '{the input state value}', { expires: 7 });

在WOAHbar jQuery上设置Cookie以记住以前的状态

1 个答案: