0

LOADING という単語で画面をアニメーション化するようなことは何もしていませんが、画面上で指をスライドさせると、下部のツールバー/フッターに次の単語が表示されます。

読み込み中

これが私のコードです。ロードを示すものは何も表示されません。

JS ファイル

$(document).bind("mobileinit", function(){
    //$.mobile.pushStateEnabled = true;
    //$.mobile.hidePageLoadingMsg();
});


        $(function(){

            var menuStatus;
            $("#content").animate({
                    marginLeft: "165px",
                  }, 300, function(){menuStatus = true});

            // Show menu
            $("a.showMenu").click(function(){
                if(menuStatus != true){             
                $(".ui-page-active").animate({
                    marginLeft: "165px",
                  }, 300, function(){menuStatus = true});
                  return false;
                  } else {
                    $(".ui-page-active").animate({
                    marginLeft: "0px",
                  }, 300, function(){menuStatus = false});
                    return false;
                  }
            });


            $('#menu, #content').live("swipeleft", function(){
                if (menuStatus){    
                $("#content").animate({
                    marginLeft: "0px",
                  }, 300, function(){menuStatus = false});
                  }
            });

            $('#content').live("swiperight", function(){
                if (!menuStatus){   
                $("#content").animate({
                    marginLeft: "165px",
                  }, 300, function(){menuStatus = true});
                  }
            });


});

HTMLファイル

<!DOCTYPE html> 
<html> 
    <head> 
    <title>SITE</title> 
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript" src="js/jmobile-animate.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="cordova-2.0.0.js"></script>
</head> 

<body>
<div id="menu">
    <ul>
        <li class="active"><a href="#home" class="contentLink">Dashboard <span class="icon"></span></a></li>
        <li><a href="#page1" class="contentLink">Subpage 1 <span class="icon"></span></a></li>
        <li><a href="#page2" class="contentLink">Subpage 2 <span class="icon"></span></a></li>
        <li><a href="#page3" class="contentLink">Subpage 3 <span class="icon"></span></a></li>
    </ul>
</div>


<div id="content">
    <div class="hbg"><img src="images/small-logo.png" style="display:block;margin:2px auto 0 auto;"/></div>
</div>




</body>

<div data-role="footer" id="footer"> 
    <h4>&copy; 2012 SITE</h4> 
</div> 
</html>
4

2 に答える 2

0

交換

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

と

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script>
于 2012-08-14T01:18:52.933 に答える
0

jquery モバイル js が含まれているようです。したがって、コードに " などの jquery モバイル固有の属性は表示されませんが、jquery モバイル機能が本当に必要だと思いdata-role="page",data-role="contentます。jquery モバイル js に加えて、jquery を含める必要があります。モバイル css も表示されます。表示されている「読み込み中」テキストは、jquery モバイル読み込みメッセージ div からのものです。最初は css によって非表示になり、$.mobile.showPageLoadingMsg() が呼び出されたときに表示されます。

main.css をロードする前に、この行を追加します

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

または、jquery モバイル機能が必要ない場合は、jquery モバイル js のスクリプト タグを削除できます。

コードで別のことに気付きました。フッター div は body タグの外側にあります。意図しない場合は body タグの内側に追加してください。

于 2012-08-14T06:41:58.233 に答える