Question

我正在使用phonegap为android开发一个Android应用程序。由于jQuery mobile为我们提供了丰富的ui组件。所以我选择使用jQuery mobile。

现在我已经阅读了

的幻灯片覆盖面板教程

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

当我尝试使用它时它不起作用。请帮忙

<!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

您正在使用旧版本的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>

使用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 个答案: