2

我正在使用 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>
4

2 回答 2

3

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

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

众所周知，基金会的在线文档具有误导性。我遇到了这种墙，在浪费了很多时间和头发之后，我从源头得到了解决方案。

首先，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 的 start 将永远不会被调用。

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

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

我希望这有帮助。

于 2014-02-28T13:09:48.323 回答
3

一个简单的方法是使用本地存储。请参见下面的代码：

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

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

我希望我对你有帮助！=)

于 2014-07-18T20:39:14.183 回答