2013-05-13 93 views
5

我想顯示的頁面加載小部件直到頁面加載完畢後,它應該隱藏...並做這個過程中,每次我衝任何錨傳送到下一個頁面..不會隱藏加載器,直到頁面完全加載到jQuery的移動

支持,我有三個網頁...

<div data-role="page" id="home">....</div> 
<div data-role="page" id="about">....</div> 
<div data-role="page" id="contact">....</div> 

腳本這個我使用: -

$(document).on("pagecreate", function(event) { 
    //alert("Take It Show"); 
    $(".ui-loader").loading("hide"); 
}); 

是否有可能將data-transition="slide"等轉換添加到任何錨點或在其中使用data-ajax="false" ......?

回答

9

工作例如:http://jsfiddle.net/Gajotres/Zr7Gf/

基本上從底部JavaScript是你所需要的。

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#second" class="ui-btn-right">Next</a> 
     </div> 

     <div data-role="content"> 

     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
    <div data-role="page" id="second"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#index" class="ui-btn-left">Back</a> 
     </div> 

     <div data-role="content"> 

     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
</body> 
</html> 

的Javascript:

$(document).on('pagebeforecreate', '[data-role="page"]', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '[data-role="page"]', function(){ 
    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },300);  
}); 
+2

很好的回答,感謝您的... – SaurabhLP 2013-05-13 11:04:55

+0

我看到你的代碼是從不同[jsfiddle.net/Gajotres/Zr7Gf ](http://jsfiddle.net/Gajotres/Zr7Gf/) – ggDeGreat 2015-10-01 04:18:57

相關問題