Foundation 兜风仅在首次加载问题时启动答案

【问题标题】：Foundation joyride start only on first load isuueFoundation 兜风仅在首次加载问题时启动
【发布时间】：2014-03-22 14:24:03
【问题描述】：

我正在使用 Foundation Joyride 并且每次加载网页时都会开始游览，但是如何仅在第一次加载网页时才开始游览？

我参考了Foundation joyride start only on first load 的问题。但不工作。

我的设置是..

<script src="~/Scripts/Foundation/foundation.js"></script>
<script src="~/Scripts/jquery.cookie.js"></script>
<script src="~/Scripts/Foundation/foundation.joyride.js"></script>

 <body>

   .......................

    <ol class="joyride-list" data-joyride id="tour">
     <li data-id="welcome" data-text="Next" data-options="tip_location:top">
        <p>Welcome, you can manage your accont details here.</p>
    </li>
     <li data-id="numero2" data-button="End">
        <p>You can see all the Log details here.</p>
    </li>
   </ol>
  <script>
    $(window).load(function () {
        $("#tour").joyride({
            cookieMonster: true,
            cookieName: 'JoyRide'
        });
    });
    $(document).foundation();
    $(document).foundation('joyride', 'start');
 </script>
 </body>

【问题讨论】：

标签： jquery zurb-foundation zurb-joyride

【解决方案1】：

一种简单的方法是使用本地存储。见以下代码：

 if (!localStorage['tutorial']) {
    localStorage['tutorial'] = 'yes';
    $(document).foundation('joyride', 'start');
 }

它会在第一次加载网页时开始兜风。

希望对你有所帮助！ =)

【讨论】：

【解决方案2】：

注意：正如 @Eduardo 的评论中所指出的，这个 Foundation 5 错误已得到修复，因此如果您使用的是 Foundation 5 的最新版本，则不需要此 hack 即可让 Joyride 插件工作。

你的标记中有这个 class="joyride-list" 所以我假设你使用的是 Foundation 5。

Foundation 的在线文档具有误导性是出了名的。我遇到了这种墙，在浪费了很多时间和头发后，我从源头得到了解决方案。

首先，与您在在线文档中找到的内容相反，joyride 设置并非驼峰式。因此cookieMonster 实际上是cookie_monster 而cookieName 实际上是cookie_name

接下来，joyride.js 以这种方式检查未设置的 cookie：

if (!this.settings.cookie_monster || this.settings.cookie_monster && $.cookie(this.settings.cookie_name) === null) {
    this.settings.$tip_content.each(function (index) {
    var $this = $(this);
    this.settings = $.extend({}, self.defaults, self.data_options($this))

    // Make sure that settings parsed from data_options are integers where necessary
    for (var i = int_settings_count - 1; i >= 0; i--) {
        self.settings[integer_settings[i]] = parseInt(self.settings[integer_settings[i]], 10);
      }
      self.create({$li : $this, index : index});
    });

问题是$.cookie(this.settings.cookie_name) 返回undefined（至少在我自己的安装中是这样）而不是null 因此如果你将cookie_monster 设置为true，joyride 的启动将永远不会被调用。

理想情况下，您需要做的就是：

<script>
  $(document).foundation({
    'joyride': {'cookie_monster': true}    // not cookieMonster
  }).foundation('joyride', 'start');
</script>

但由于存在错误，这将不起作用，因此您可以使用以下代码解决它：

<script>
  $(document).foundation({
    'joyride': { 'cookie_monster': !$.cookie('joyride') ? false : true,
                 post_ride_callback : function () {
                  !$.cookie('joyride') ? $.cookie('joyride', 'ridden') : null;
                 }    // not cookieMonster
               } // * edited original answer, missing closing bracket
  }).foundation('joyride', 'start');
</script>

我希望这会有所帮助。

【讨论】：

我使用了你的最后一个脚本它不起作用你能解释一下我应该怎么做你可以在这里查看jsfiddle.net/umairshah/8sj0sw3e/2
很有趣，在您于 2014 年 1 月 12 日发表这篇文章的几周前，我已经在 Joyride 上修复了这个错误。可能您没有使用 repo 版本。从那时起，例如在 Foundation 5 上，不应需要此 hack。