Question

我正在尝试使用Jquery-Joyride - http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin，但我不能让它与Jquery Mobile一起使用。只要添加标准JQM标记，帮助窗口就不再显示。

以下是我正在尝试的内容： .....

<ol id="joyRideTipContent">
  <li data-id="numero2" data-text="Next" class="custom">
    <h2>Stop #1</h2>
    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  </li>

...

<script>
  $(window).load(function() {      
    $('#joyRideTipContent').joyride({postStepCallback : function (index, tip){
      if (index == 2) {
        $(this).joyride('set_li', false, 1);
      }
    }});
  });
</script>

.....

<div class="row">
 <div class="four columns">
    <img src="280x120.gif"></img>
  </div>
  <div class="eight columns">
    <h3 id="numero2">Customize Each Stop Along the Way</h3>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
  </div>
</div>

.....

上面的代码一切正常。但是，只要添加JQM特定标记，就不再显示帮助窗口。

<div data-role="page" class="type-home" data-dom-cache="false" id="home">

我不确定如何让这个工作。任何帮助表示赞赏。

Answer 1

此处的问题是 window load ，例如 document ready ，它无法正常使用 jQuery Mobile

相反，你应该使用它：

$(document).on('pageshow', '#index', function(){       
    $('#joyRideTipContent').joyride();
});

其中 #index 是您网页的ID。

使用 jsFiddle 示例：http://jsfiddle.net/Gajotres/sdwXt/

它来自官方的 DEMO 示例。

最后一件事，在你进一步开始 jQuery Mobile 之前，请阅读我的其他 ARTICLE ，或者找到 {{3} }

Answer 2

如果您需要两次调用joyride（）函数，请恢复到版本2.0.3，可以在https://github.com/zurb/joyride/releases找到 - 我尝试了几个版本，它是唯一没有任何明显错误的版本！

Jquery Joyride - 不与Jquery Mobile合作

2 个答案: