2

我正在尝试使用 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">

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

4

2 回答 2

0

这里的问题是window load，document ready它不能正常工作jQuery Mobile。

相反，你应该使用这个：

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

#index您的页面的 id在哪里。

工作jsFiddle示例：http: //jsfiddle.net/Gajotres/sdwXt/

它是根据官方的DEMO示例制作的。

最后一件事，在你进一步jQuery Mobile阅读我的另一篇文章之前，或者在这里找到它。

于 2013-03-15T18:31:57.877 回答
0

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

于 2013-09-03T13:45:22.133 回答