JQuery Mobile Transition не работает

Я пытаюсь построить простой мобильное приложение, и это мой первый раз, используя JQuery Mobile я следовал учебники онлайн и я не могу найти то, что случилось с моим кодом: \JQuery Mobile Transition не работает

Я 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, Firefox, то есть ?? – eduyayo

Просто удалите window.location.hash = 'homepage'; и $ .mobile.initializePage() ;. Они не нужны. Домашняя страница будет автоматически загружаться, поскольку это первая определенная страница в документе. – ezanker

Извините за поздний ответ .. Я теперь попробовал его в проводнике, но он выглядит так же .. eznaker, я удалил хеш-код, и теперь он работает спасибо! :) – Neit

решаемые путем удаления первой функции «» document.ready с хэш

источник

2014-11-02 13:25:30 Neit

JQuery Mobile Transition не работает

ответ

Смежные вопросы