Question

在学习jquery mobile时，我设置了一个基本的页面转换，可以将我从page1滑到page2。无论我使用的库版本如何，我都会在我尝试实现的swipeleft / swiperight / click事件中得到相同的错误（通过控制台 - 页面只是挂起） -

未捕获的ReferenceError：未定义MenuButtonRounded
未捕获的ReferenceError：未定义scaleImage

有关为何会发生这种情况的任何建议？以下示例代码 -

<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 
<body> 

<div data-role="page" id="page1">

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

    <div data-role="content">   
           <ul data-role="listview" data-inset="true" data-filter="true">
          <li><a href="#">Acura</a></li>
          <li><a href="#">Audi</a></li>
          <li><a href="#">BMW</a></li>
          <li><a href="#">Cadillac</a></li>
          <li><a href="#">Ferrari</a></li>
           </ul>
    </div><!-- /content -->

</div><!-- /page -->

<div data-role="page" id="page2">

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

    <div data-role="content">   
           <ul data-role="listview" data-inset="true" data-filter="true">
               <li><a href="#">Acura</a></li>

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

</div><!-- /page --> 


<script>
    $("#page1").on("swiperight",function(event){
        $.mobile.changePage( "page2");      // this is where my error occurs!

        });

</script>
</body>
</html>

Answer 1

它似乎正在我的工作，但是它说第2页（404错误）不存在。

查看“滑动导航”中的jQuery文档

http://demos.jquerymobile.com/1.4.5/swipe-page/

jquery mobile - 简单的页面转换快照

1 个答案: