Javascript JQuery移动面板小部件终止页面

我试图在jquery移动页面中添加一个面板，但每当我将代码放入其中时，它只会显示一个带有加载小部件的白色屏幕，而不会执行任何其他操作。我使用的是谷歌托管的JQuery 2.0.0、JQuery托管的JQuery Mobile JS 1.3.1和JQuery托管的JQuery Mobile css，但似乎仍然无法实现这一点。面板代码也直接从JQuery Mobile文档中提取

这是我得到的，这是一个简单的登录页面：

<div data-role="page" id="mainPage">
    <!-- leftpanel1  -->
    <div data-role="panel" id="leftpanel1" data-position="left" data-display="reveal" data-dismissible="true" data-theme="a">

        <div class="panel-content">
            <h3>Left Panel: Reveal</h3>
            <p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
            <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
            <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">Close panel</a>
        </div><!-- /content wrapper for padding -->

    </div><!-- /leftpanel1 -->
    <div data-role="content">
        <div id="logo"><img src="img/logo.png" style="width:100%;height:25%"></div>
        <br /><br /><br />
        <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-transition="flow">Login</a>
        <br />
        <a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Reveal</a>
        <a href="moreInfo" data-role="button">More Info</a>
        <br /><br /><br /><br /><br />
        New to 2Gen? <a href="#register">Sign up for an account.</a>
        <div data-role="popup" id="popupMenu">
            <div data-role="popup" id="popupLogin">
                <div data-role="fieldcontain">
                    <div style="padding:10px 20px;">
                        <h3>Please sign in</h3>
                            <input class="inputBox" type="text" id="loginUsername" value="" placeholder="Username">
                            <input class="inputBox" type="password" id="loginPassword" value="" placeholder="Password">
                            <br />
                            <div class="ui-grid-a">
                                <div class="ui-block-a">
                                    <input type="checkbox" data-mini="true" id="rememberMeCheckbox" name="rememberMeCheckbox">
                                    <label for="rememberMeCheckbox">Remember<br /> Me</label></div>
                                <div class="ui-block-b"><a href="#" onclick="login()" data-role="button" data-mini="true">Login</a>
                                </div></div>
                            </div><!-- /grid-a -->
                    </div>
                </div>
            </div>
        </div>
</div><!-- /page -->

左面板：显示
此面板位于显示模式的左侧。面板标记位于源顺序的页眉、内容和页脚之后

要关闭，请单击面板，向左或向右滑动，按Esc键，或使用下面的按钮：















2Gen的新成员？
请登录


还记得我吗

任何帮助都将不胜感激，谢谢

以下是我的观点：

编辑：

---

我明白了为什么它不起作用，显然它不象我使用JQuery 2.0.0时那样，所以当我切换到1.9.1时，它工作得很好。

我只是在jsfiddle.net上试用了它，它工作得很好

...

---

我刚刚在jsfiddle.net上试用过，效果不错

...

---

jQuery Mobile 1.3还不支持jQuery 2.0

---

仅从1.4版开始，它将与jQuery 2.0（7月至8月）一起使用。

jQuery Mobile 1.3目前还不支持jQuery 2.0

仅从1.4版开始，它将与jQuery2.0一起使用（7月至8月）

    <div data-role="panel" id="leftpanel1"
     data-position="left" data-display="reveal"
     data-dismissible="true" data-theme="a">

    <div class="panel-content">
       ...
    </div>
  </div>