1

このコードの何が問題なのか知りたいのですが、これは私がオンラインで学んだチュートリアルであり、彼は私がコピーして貼り付けたソースコードを提供しましたが、私の最後では機能しないようです

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Mobile 1.3 | Swipe to Reveal Panel Demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme='c'>

    <div data-role="header">
        <h1>Swipe for Panel Demo</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">  
            <h2>If you swipe left-right</h2>    
            <h2>If you swipe right-left</h2>        
        </div>
        <p><em>This page uses jQuery Mobile 1.3.0-beta 1</em></p>
    </div><!-- /content -->

    <div data-role="panel" id="leftpanel" data-display="reveal" data-position="left">
        <ul data-role='listview'>
            <li data-theme='a'>Listview</li>
            <li>Item A<span class='ui-li-count'>24</span></li>
        </ul>

    </div><!-- /leftpanel -->
    <div data-role="panel" id="rightpanel" data-display="push" data-position="right"data-theme="b">
        <h2>What are you looking for?</h2>
    </div><!-- /rightpanel -->
</div><!-- /page -->
<script type='text/javascript'>
$(document).on('pageinit',function(){
    $("#content").on("swiperight",function(){
        $("#leftpanel").panel( "open");
    });
    $("#content").on("swipeleft",function(){
        $("#rightpanel").panel( "open");
    });
});
</script>
</body>
</html>

最後にページをスワイプしても何も起こりませんが、チュートリアルが完全に機能するオンラインデモでそれを行うと. 助けてください。

4

0 に答える 0