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サンプルから作成されました。

最後にもう 1 つ、さらに先に進む前に、私の他のARTICLEjQuery Mobileを読むか、ここで見つけてください。

于 2013-03-15T18:31:57.877 に答える
0

joyride() 関数を 2 回呼び出す必要がある場合は、 https://github.com/zurb/joyride/releasesにあるバージョン 2.0.3 に戻してください。いくつかのバージョンを試しましたが、これが唯一のバージョンです。明らかなバグのないもの！

于 2013-09-03T13:45:22.133 に答える