Question

我正在与Jquery Mobile平台合作开发移动网站。我必须使用面板。我能够创建一个工作面板http://jsfiddle.net/VQmsw/，但是当我将这段代码嵌入到我的实际文件中时，它会给出一些页面加载问题。

<head>
    <title>Panels | Jquery Mobile</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
    <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>

<body>
    <!-- @ Page=menu -->
    <div data-role="page" id="menu">
        <div data-role="panel" id="myPanel" class="main_nav" data-display="push" data-dismissible="true" data-theme="a">
            <div class="nav_profile">
                <div class="nav_name">
                    <h3>user</h3>
                    <p>2 active threads</p>
                </div>
                <!--/nav_name-->
            </div>
            <!--/nav_profile-->
        </div>
        <!-- /panel -->
        <div data-role="header" class="ui-header ui-bar-c" data-fullscreen="true" data-position="fixed" data-tap-toggle="false">
            <a href="#myPanel" data-icon="home" data-iconpos="notext" data-theme="c"></a>
            <h1 class="ui-title" role="heading" aria-level="1">Events</h1>
            <a href="#myPanel" data-icon="menu" data-iconpos="notext" data-theme="c"></a>
        </div>
        <div data-role="content"></div>
    </div>
    <!--/menu-->
</body>

http://jsfiddle.net/57Mfu/。我知道在小提琴中你需要提供外部资源，但同样的代码也不能正常工作。

任何建议??

Answer 1

使用最新稳定版本的jQuery 1.9.1和jQuery-Mobile 1.3.1。

<head>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3. 1.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

Answer 2

您应该使用jquery 1.9.1而不是2.0来尝试此操作。我之前遇到过类似的问题 - 它在jsfiddle上工作但现在在我的代码中 - 然后我使用了所有正确版本的jquery和jquery-mobile，它就像一个魅力。

Jquery Mobile Panel：页面无法加载

2 个答案: