Jquery Joyride - 不能用Jquery Mobile

我正在嘗試使用Jquery-Joyride - http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin，但我無法使用它與Jquery Mobile一起工作。只要添加標準JQM標籤，幫助窗口將不再顯示。Jquery Joyride - 不能用Jquery Mobile

這裏是我嘗試： .....

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

我不知道如何得到這個工作。任何幫助表示讚賞。這裏

來源

2013-03-15 user2175057

文檔就緒或窗口加載不能用於在jQuery Mobile頁面內初始化jQuery插件，您應該在您的案例中使用適當的jQuery Mobile頁面事件。閱讀更多關於它在這裏：http://stackoverflow.com/a/14469041/1848600 – Gajotres 2013-03-15 18:18:00

問題是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，或者發現它HERE。

來源

2013-03-15 18:31:57 Gajotres

工作很好。謝謝！ – user2175057 2013-03-15 20:42:02

我可以得到這一切工作，但由於某種原因，我不得不打電話$（'＃joyRideTipContent'）。兩次才能開始。我在JSfiddle中看到，你不必這樣做，但出於某種原因，我無法以其他方式使其工作。有什麼建議麼？ – user2175057 2013-03-23 18:04:54

如果這不是問題，請寄給我你的信息頁，我會看看它。我的郵件可以在我的個人資料中找到。 – Gajotres 2013-03-23 18:13:23

如果您不得不兩次調用joyride（）函數，回到版本2.0.3，它可以在https://github.com/zurb/joyride/releases找到 - 我嘗試了幾個版本，它是唯一沒有任何明顯錯誤的版本！

來源

2013-09-03 13:45:22 evilunix

Jquery Joyride - 不能用Jquery Mobile

回答

相關問題