爲了讓swiper能夠正確加載jQuery Mobile以及我應該使用哪個頁面事件，我該按照哪種順序準確放置javascript文件？

Question

但是，在此之前我已經提出了這個問題，因爲它適用於使用jQuery Mobile時嘗試加載到DOM中的任何JavaScript。

我有三個頁面使用jQuery Mobile 1.4.0 RC1構建。 index.html只是一個頁面模板，我將swiper添加到第2頁，swiper和easytabs添加到第3頁。您可以在這裏看到它們：http://builtformobile.com/demos/jquerymobile/swiper1/index.html

我試過將jQuery和jQuery Mobile JavaScript文件放在幾個不同的方式，在頭部，底部，至於idangero.us的額外javacript Swiper和Jango Steve在數據角色頁面外部和內部的Easytabs.js。

根據我在哪裏放置javascript for easytabs和swiper，在DOM內部或外部，使用pagecreate或pageinit，當加載或刷新頁面時，我仍然會得到奇怪的結果。我要麼必須刷新頁面才能使javascript工作，要麼我看到其他頁面的內容加載到不應加載它的頁面上。

我的問題是： 我在哪裏放置javascript？ 加載jQuery Mobile之前還是之後？ 我在哪裏放置javascript文件，哪些頁面事件對我的頁面是正確的？ 在進入另一個頁面之前，我是否使用頁面事件來顯示內容和另一個頁面事件以停止該內容？

非常感謝您的時間。

<div data-role="header"> 
     <h1>three</h1> 
    </div><!-- /header --> 

    <div data-role="navbar" class="navbar"> 
     <ul> 
      <li><a href="index.html">Index</a></li> 
      <li><a href="page-two.html">Page 2</a></li> 
      <li><a href="page-three.html">Page 3</a></li> 
     </ul> 
    </div> 

    <div data-role="content">  

     <a class="arrow-left" href="#"></a> 
     <a class="arrow-right" href="#"></a> 
     <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
      <div class="swiper-slide"> <img src="img/slider1-1.png"> </div> 
      <div class="swiper-slide"> <img src="img/slider1-2.png"> </div> 
      <div class="swiper-slide"> 
       <div class="content-slide"> 
       <p class="title">Slide with HTML</p> 
       <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="pagination"></div> 


     <div id="tab-container" class="tab-container"> 
      <ul class="etabs"> 
       <li class="tab"><a href="#tab1">Tab 1</a></li> 
       <li class="tab"><a href="#tab2">Tab 2</a></li> 
       <li class="tab"><a href="#tab3">Tab 3</a></li> 
      </ul> 
      <div class="panel-container"> 
       <div id="tab1"> 
        content 3 
       </div> 
       <div id="tab2"> 
        content 2 
       </div> 
       <div id="tab3"> 
        content 1 
       </div> 
      </div> 
     </div> 

    </div><!-- /content --> 

<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div><!-- /footer --> 


<script src="js/idangerous.swiper-2.1.min.js"></script> 
<script> 
$(function(){ 
    var mySwiper = $('.swiper-container').swiper({ 
     pagination: '.pagination', 
     loop:true, 
     grabCursor: true, 
     paginationClickable: true 
    }) 
}) 

$('.arrow-left').on('click', function(e){ 
    e.preventDefault() 
    mySwiper.swipePrev() 
}) 

$('.arrow-right').on('click', function(e){ 
    e.preventDefault() 
    mySwiper.swipeNext() 
}) 

</script> 

<script src="js/jquery.easytabs.min.js"></script> 
<script> 
    $(function() { 
     $('#tab-container').easytabs(); 
    }); 
</script> 

</div> 

Answer 1

每個PA GE應該有所有的JavaScript，這是因爲：

• 用戶可在index，page1或page2
• 開始的第一個頁面加載的將是你的 「錨頁面」（〜JQM稱之爲documentBase）。
• 用戶將永遠離開這個頁面，除非（單程）添加data-ajax="false"一個鏈接
• 後續頁面的用戶訪問將通過JQM通過AJAX來獲取並添加到現有的DOM
• 這樣做時，JQM只是插入裏面是什麼頁面的第一<div data-role="page"></div>加載

如果禁用JQM哈希管理你會看到，會從：

/foo/bar/index.html > /foo/bar/page1.html 

將URL切換到

/foo/bar/index.html#foo/bar/page1.html 

這JQM口罩

/foo/bar/page1.html 

因此，除非用戶啓動這個頁面上，你放在pageX所有<script>標籤將不會被加載。

我建議您將js方法放在一個文件中，並將其與您需要的其他JavaScript文件一起加載。把所有文件放在所有頁面上，你就可以走了。文件只會被加載到第一頁，所以唯一的問題將是如何最小化首頁加載（當需要提取所有內容 - 這是一個不同的故事）