jQuery Mobile的過渡不工作

我試圖建立一個簡單的移動應用程序，它是一個使用jQuery Mobile的我跟着教程在網上我第一次和我找不到什麼是錯我的代碼：\jQuery Mobile的過渡不工作

我m試圖用幻燈片轉換創建3個不同的頁面。滑動工作，但沒有過渡。

當視圖加載，它看起來像我有這種「加載圈」停留在屏幕中間，但我不能找到什麼導致我的錯誤和Eclipse的控制檯是空

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My first app OMG</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="jquery/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="jquery/jquery-2.1.1.js"></script> 
    <script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script> 

    <link href="stylesheet.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript" src="functions.js"></script> 
</head> 
<body> 

<!-- Homepage menu and content --> 
<div data-role="page" id="homepage"> 

    <div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li> 
       <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li> 
       <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li> 
      </ul> 
     </div> 

     <h1>Latest Feeds</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
     <p>Content of 'Home'..</p> 
    </div> 
</div> 

<!-- Trending posts menu and content --> 
<div data-role="page" id="trending"> 

    <div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li> 
       <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li> 
       <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li> 
      </ul> 
     </div> 

     <h1>Most Visited</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
     <p>Content of 'Trending'..</p> 
    </div> 
</div> 

<!-- Category filter menu and content --> 
<div data-role="page" id="bycategory"> 

    <div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#homepage" data-transition="slide" data-icon="home">Home</a></li> 
       <li><a href="#trending" data-transition="slide" data-icon="star">Trending</a></li> 
       <li><a href="#bycategory" data-transition="slide" data-icon="bullets">Categories</a></li> 
      </ul> 
     </div> 

     <h1>Categories</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
     <p>Content of 'Categories'..</p> 
    </div> 
</div> 

</body> 
</html>

這裏是被我的scripts-

$(document).ready(function() { 

    // Set first page to load to #homepage 
    window.location.hash = 'homepage'; 
    $.mobile.initializePage(); 
}); 

$(document).on('swipeleft swiperight', function (event) { 
if(event.type == 'swiperight') { 
    var prevpage = '#' + $.mobile.activePage.prev('div[data-role="page"]')[0].id; 
     $.mobile.changePage(prevpage, { 
     transition: 'slide', 
     reverse: true 
     }); 
} 

if(event.type == 'swipeleft') { 
    var nextpage = '#' + $.mobile.activePage.next('div[data-role="page"]')[0].id; 
     $.mobile.changePage(nextpage, { 
     transition: 'slide', 
     reverse: false 
     }); 
} 
});

來源

2014-11-01 Neit

是它在Chrome，火狐，即工作去除第一「的document.ready」功能解決了？ – eduyayo 2014-11-01 16:12:01

只要刪除window.location.hash ='網頁';和$ .mobile.initializePage（）;.他們不需要。首頁將自動加載，因爲它是文檔中第一個定義的頁面。 – ezanker 2014-11-01 18:49:28

對不起，對於遲到的答覆..我現在試圖在資源管理器，但它看起來是一樣的.. eznaker，我刪除了哈希碼，現在它的作品謝謝！ :) – Neit 2014-11-02 13:24:30

通過哈希

來源

2014-11-02 13:25:30 Neit

jQuery Mobile的過渡不工作

回答

相關問題