Jquery mobile的滑动覆盖面板无法正常工作

Question

I am developing an android application using phonegap for android. 我正在使用phonegap为android开发一个Android应用程序。 As jQuery mobile provide us rich ui components. 由于jQuery mobile为我们提供了丰富的ui组件。 So I have choose to use jQuery mobile. 所以我选择使用jQuery mobile。

Now I have read the tutorials for slide overlay panel from 现在我已经阅读了幻灯片覆盖面板的教程

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

when I try too use it it is not working. 当我尝试使用它时，它无法正常工作。 Please help 请帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>Insert title here</title>
</head>
<body>
    <div data-role="page">

        <div data-role="panel" id="mypanel" data-position="right"
            data-position-fixed="true" data-display="overlay">
            <p>Testing Slide panel</p>
        </div>
        <!-- /panel -->


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

        <div data-role="content">
            <p><a href="#mypanel">open slide overlay panel</a></p>
        </div>
        <!-- /content -->

        <div data-role="footer">
            <h4>@Copyrights reserved.</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->

</body>
</html>

Answer 1

You are using older version of jQuery Mobile. 您正在使用旧版本的jQuery Mobile。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Use 1.3 instead of 1.2 使用1.3而不是1.2

<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>

Jquery mobile的滑动覆盖面板无法正常工作

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-02-26 07:54:59

Jquery mobile的滑动覆盖面板无法正常工作

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-02-26 07:54:59

解决方案1
2 已采纳 2013-02-26 07:54:59