阿賈克斯裝載機工作不正常

我試圖使用jQuery的移動微調，但它似乎沒有工作阿賈克斯裝載機工作不正常

從官方文檔（http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html），我tryied在Chrome控制檯中運行這個和它的作品

$.mobile.loading('show', { 
    text: 'foo', 
    textVisible: true, 
    theme: 'z', 
    html: "<i class='icon-spinner icon-4x'></i>" 
});

但如果我嘗試運行此，從application.html.haml或控制檯，似乎不工作

$(document).bind('mobileinit', function(){ 
    $.mobile.loader.prototype.options.text = "loading"; 
    $.mobile.loader.prototype.options.textVisible = false; 
    $.mobile.loader.prototype.options.theme = "a"; 
    $.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>"; 
});

這裏顯示了一層陰影，而不是我的飛旋： - ？。

我在這裏失蹤了什麼？

謝謝:)

來源

2013-04-06 vladCovaliov

它最有可能的似乎是你的CSS被錯誤地連接到圖像，微調是一個GIF設置在CSS背景 – 2013-04-06 13:26:40

解決方案：

工作的jsfiddle：http://jsfiddle.net/Gajotres/vdgB5/

Mobileinit事件必須jQuery Mobile的初始化之前和進行初始化的jQuery後。此外，還需要對css進行一些其他更改才能使其工作。

首先，我們需要覆蓋默認的ui-loader-default類，因爲它的不透明度很低，最終的微調器很難看清。改變不透明度值，你想要什麼。

.ui-loader-default { 
    opacity: 1 !important;  
}

而這是我們的微調。因爲你正在使用自定義我的標籤，我們需要使用display: block，沒有它，微調將被隱藏。

.custom-spinner { 
    width: 37px !important; 
    height: 37px !important; 
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif'); 
    display: block; 
}

這裏有一個工作示例：

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" /> 
     <style> 

      .ui-loader-default { 
       opacity: 1 !important;  
      } 

      .custom-spinner { 
       width: 37px !important; 
       height: 37px !important; 
       background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif'); 
       opacity: 1 !important; 
       display: block; 
      } 
     </style> 
     <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
     <script> 
      $(document).bind('mobileinit', function(){ 
       $.mobile.loader.prototype.options.text = "loading"; 
       $.mobile.loader.prototype.options.textVisible = false; 
       $.mobile.loader.prototype.options.theme = "a"; 
       $.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>"; 
      }); 
     </script>  
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
     <script> 
      $(document).on('pageshow', '#index', function(){   
       $.mobile.loading('show');   
      }); 
     </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> 
    </body> 
</html>

來源

2013-04-06 13:50:22 Gajotres

阿賈克斯裝載機工作不正常

回答

相關問題