jQuery Mobile 转换不起作用答案

【问题标题】：jQuery Mobile Transition not workingjQuery Mobile 转换不起作用
【发布时间】：2014-11-01 14:47:27
【问题描述】：

我正在尝试构建一个简单的移动应用程序，这是我第一次使用 jQuery Mobile 我按照在线教程进行操作，但找不到我的代码有什么问题：\

我正在尝试使用幻灯片转换创建 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>

这是我的脚本-

$(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
      });
 }
});

【问题讨论】：

它可以在 chrome、firefox 中工作吗？？
只要去掉window.location.hash = 'homepage';和 $.mobile.initializePage();。它们不是必需的。主页将自动加载，因为它是文档中定义的第一个页面。
抱歉回复晚了..我现在在资源管理器上试了一下，但看起来一样..eznaker，我删除了哈希码，现在它可以工作了，谢谢！ :)

标签： android eclipse jquery-mobile cordova

【解决方案1】：

通过删除第一个带有哈希的'document.ready'函数解决

【讨论】：