Question

Jquery移动面板只是不起作用，我错过了什么？我阅读了文档，我只是不明白为什么不起作用。

<div data-role="page">

  <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Menu</a> <h1>Home</h1>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom" data-inline="true">Profilo</a>        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>

    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="match.html">Match</a></li>
            <li><a href="profilo.html">Profilo</a></li>
            <li><a href="mercatino.html">Mercatino</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->

此ID为JsFiddle Page

我是jquery mobile的新手..很抱歉，如果问题会很愚蠢^^ 谢谢

Answer 1

您加载了JQueryMobile的错误版本（1.2.1）。面板支持从JQM 1.3.0开始。我分叉你的jsFiddle并将jQuery和JQM更新为1.3.2 here。

与您的代码相同。

<div data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> <h1>Home</h1>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom" data-inline="true">Profilo</a>    
        <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom" data-inline="true">Profilo</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom" data-inline="true">Profilo</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="bottom" data-inline="true">Profilo</a>        
    </div>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>

    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="match.html">Match</a></li>
            <li><a href="profilo.html">Profilo</a></li>
            <li><a href="mercatino.html">Mercatino</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->

Answer 2

您应该更新您的JQuery Mobile版本。在这里做：http://jquerymobile.com/download/

Jquery移动面板不起作用..

2 个答案: