2012-08-13 48 views
0

我還沒有做過任何事情,應該讓它使用LOADING這個詞來使屏幕變成動畫,但是當我在屏幕上滑動手指時,我得到了一個底部工具欄/頁腳,它顯示一句話:jQuery Mobile在底部有一個意想不到的動畫

裝載

這裏是我的代碼,你會看到在什麼也沒有顯示加載。

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

我猜它必須在jmobile-animate.js或app.js文件中,嘗試在這些文件中搜索單詞'loading'? – Timm 2012-08-13 14:32:48

回答

0

我看到你已經包含了jQuery的移動js.So我假設你真的需要一些jQuery的移動功能,雖然我沒有看到任何jQuery的移動特定屬性像data-role="page",data-role="content「等在你的代碼。隨着jQuery的移動js,你必須inclide jquery mobile css也是如此。你所看到的「正在加載」的文本是來自jquery mobile的加載消息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 Mobile的功能,可以刪除腳本標記爲jQuery Mobile的JS。

剛剛注意到了代碼中的另一件事。頁腳div在body tag之外。如果這是無意的,請將其添加到body標籤中。

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>