0

Jquery mobile panels just don't work, Am I missing something? I read the documentation and I just don't understand why doesn't work. 

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

This id the JsFiddle Page

I'm new with jquery mobile.. so sorry if the problem will be stupid ^^ Thank you

4

2 回答 2

2

您加载了错误的 JQueryMobile 版本 (1.2.1)。面板支持从 JQM 1.3.0 开始。我分叉了你的 jsFiddle 并将 jQuery 和 JQM 更新到 1.3.2这里。

与您的代码相同。

<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 -->
于 2013-08-11T15:43:37.607 回答
1

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

于 2013-08-11T15:49:43.137 回答