on mobile.changepage外部HTML文件需要頁面刷新

我一直在尋找這個問題的解決方案很多天。 1st Splash Page具有超時時間，然後它會加載帶有鏈接列表的主頁。鏈接正在顯示，但圖標（真棒圖標）沒有加載，我設置在每個li上的轉換也沒有加載。一旦頁面加載，如果我刷新它的所有內容與過渡效果正在工作。我正在使用animate.css進行列表動畫。on mobile.changepage外部HTML文件需要頁面刷新

有人可以找出問題嗎？

SPLASH頁面代碼

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Splash</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> 
    <link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
    <link rel="stylesheet" href="css/animate.min.css"> 
    <link rel="stylesheet" href="css/myapp.css"> 
    <link rel="shortcut icon" href="favicon.ico"> 
    <script src="js/jquery.js"></script> 
    <script src="_assets/js/index.js"></script> 
    <script src="js/jquery.mobile-1.4.5.min.js"></script> 
    <script> 
     $(document).on('pageinit','#splash',function(){ 
     // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized. 
     setTimeout(function(){ 
      //$.mobile.pageContainer.pagecontainer("change", "home.html", {transition: "animated fadeOut"}); 
      $.mobile.changePage("home.html", "animated fadeOut"); 
     }, 4000); 
    }); 
    </script> 
    </head> 
    <body> 
    <div data-role="page" id="splash"> 
     <div data-role="content"> 
      <img src="images/uos_logo.svg" alt="startup image" style="width: 100%; height: 100%" /> 
     </div> 
    </div> 


<!-- /page --> 

</body> 
</html>

主頁CODE

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Home</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> 
    <link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
    <link rel="stylesheet" href="css/myapp.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/animate.min.css"> 
    <link rel="shortcut icon" href="favicon.ico"> 
    <script src="js/jquery.js"></script> 
    <script src="_assets/js/index.js"></script> 
    <script src="js/jquery.mobile-1.4.5.min.js"></script> 
    </head> 
    <body> 

    <div data-role="page" id="home">   
     <div data-role="content"> 
      <ul id="myTabs" class="animated slideInUp"> 
       <li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 1</a></li> 
       <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 2</a></li> 
       <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 3</a></li> 
       <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 4</a></li> 
       <li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 5</a></li> 
       <li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 6</a></li> 
       <li class="clr7"><a href="#"><i class="fa fa-angle-right"></i> 7</a></li> 
       <li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 8</a></li> 
       <li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 9</a></li> 
       <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 10</a></li> 
       <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 11</a></li> 
       <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 12</a></li> 
       <li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 13</a></li> 
       <li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 14</a></li> 
       <li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 15</a></li> 
       <li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 16</a></li> 
      </ul> 
     </div> 
    </div> 
<!-- /page --> 


<script type="text/javascript"> 
    $('ul#myTabs li').each(function(i){ 
    var t = $(this); 
    setTimeout(function(){ t.addClass('animated slideInUp'); }, (i+1) * 120); 
    }); 
</script> 

</body> 
</html>

來源

2015-10-12 Malik

默認情況下JQM加載頁面到通過AJAX當前的DOM，並只得到數據，角色的第一個DIV = 「頁」。因此第二頁中的任何腳本/ css都不會被加載。

當你的意圖是要完全取代第一頁飛濺，你可以只使用

location.assign("home.html");

如果你真的想要很好的過渡，只包括你的第一頁中的初始頁面作爲一個單獨的數據-role =「page」div，或者在data-role =「page」div中包含來自home的所有腳本，以便將它們加載到dom中。

來源

2015-10-12 13:03:22 ezanker

謝謝，這真的有幫助。 – Malik

on mobile.changepage外部HTML文件需要頁面刷新

回答

相關問題