Question

我使用的是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>

Answer 1

注意：正如@Eduardo的评论所指出的，这个Foundation 5的bug已经修复，所以如果你使用的是最新版本的Foundation 5，你不需要这个hayr让Joyride插件工作。

你在标记class="joyride-list"中有这个，所以我假设你正在使用Foundation 5.

基金会的在线文档众所周知是误导性的。我遇到了这种墙，经过大量的浪费时间和头发拉动，我从源头得到了解决方案。

首先，joyride设置不是camelCase，与您在在线文档中找到的相反。因此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，那么兜风开始永远不会被召唤。

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

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

但是由于这个bug，这不起作用，所以你可以使用这段代码解决它：

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

我希望这会有所帮助。

Answer 2

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

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

第一次加载网页时，它将启动兜风。

我希望我能帮到你！ =）

基础兜风仅在第一次加载问题时开始

2 个答案: