Spinner在Android中使用時未顯示

我使用WebViewClient在Android中創建Phonegap/Jquery移動應用程序，當用戶單擊按鈕時，我想在加載JNI/javascript函數時顯示微調器。不過，我無法使用下面的代碼。Spinner在Android中使用時未顯示

注：如果我刪除調用JNI/JavaScript函數，然後微調顯示了預期。 Helper是一個java類，它從DroidGap的onCreate（）方法註冊爲appView.addJavascriptInterface（helperObject，「Helper」）;

此外，如果複製粘貼爲.html並通過瀏覽器瀏覽將工作（offcourse我不調用JNI/JavaScript函數的時間以及），這意味着它顯示微調提供我有睡眠（）時間。但是，當我使用Android時，它不顯示。 index.html位於assets/www文件夾中。

<head> 
<title>Employee Finder</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script> 
<!-- <script src="phonegap-1.3.0.js"></script> --> 
<script> 

$(document).ready(function() { 

    $('#findemp').click(function() { 
     var empNumber = $("#employeenumber").val(); 
     showSpinner();   

      var empdetail = JSON.parse(window.Helper.getEmpDetails(empNumber)); 
     //Above call takes 3-4 sec and is a JNI call meaning calling a java function. 

     hidespinner(); 
    }); 
}); 

function showSpinner() 
{ 
    var opts = { 
       lines: 13, // The number of lines to draw 
       length: 7, // The length of each line 
       width: 4, // The line thickness 
       radius: 10, // The radius of the inner circle 
       rotate: 0, // The rotation offset 
       color: '#000', // #rgb or #rrggbb 
       speed: 1, // Rounds per second 
       trail: 60, // Afterglow percentage 
       shadow: false, // Whether to render a shadow 
       hwaccel: false, // Whether to use hardware acceleration 
       className: 'spinner', // The CSS class to assign to the spinner 
       zIndex: 2e9, // The z-index (defaults to 2000000000) 
       top: 'auto', // Top position relative to parent in px 
       left: 'auto' // Left position relative to parent in px 
      }; 
      var spinner = new Spinner(opts).spin(); 
      $("#loading").append(spinner.el); 
} 

function hidespinner(){  
    $('.spinner').hide(); 

} 
</script> 


</head> 
<body> 

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Find Employee Data</h1> 
    </div> 

    <div data-role="content" id="searchDetails">  
     <input name="employeenumber" type="text" id="employeenumber" placeholder="Employee Number" min="13"/> 
     <input type="button" id="findemp" data-theme="b" value="Find Employee"/> 
     <div id="loading" ></div> 
    </div> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 

<div data-role="page" data-theme="b" data-add-back-btn="true" id="page2"> 
    <div data-role="header"> 
     <h1>Page Two</h1> 
    </div> 
    <div id="empDetails"> 
     <p><b>Name: </b></p><p id="name"></p> 
    </div> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div> 
</div> 
</body> 
</html>

來源

2012-05-22 lazyguy

Spin.js是好的，但如果你已經在使用jQuery Mobile的，你最好使用內置的微調。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

在頭

，然後：

$.mobile.loadingMessageTextVisible = true; 
$.mobile.loadingMessage = "please wait..."; 
$.mobile.showPageLoadingMsg();

示出了內置的jquery移動旋轉器。

$.mobile.hidePageLoadingMsg();

隱藏移動微調器。

來源

2012-05-22 18:50:58 jdb1a1

我也試過這個。我的問題是，當我嘗試通過Android執行此html時，它不會立即按下按鈕單擊按鈕後顯示微調框。事實上，微調者根本沒有顯示。做android需要一些特殊的權限來執行這個？我在Android中爲此使用了一個WebViewClient。 – lazyguy

讚賞您的快速回復jdb1a1。 – lazyguy

我意識到我有一個調用JSON.parse（window.Helper.getEmpDetails（empNumber））;這事件雖然需要時間，但似乎正在搞亂微調者的表現。如果我刪除此功能並添加一個睡眠，然後微調器顯示 – lazyguy

所以使用超時函數似乎有點工作。它不是一個解決方案，但至少我看到微調一段時間，然後執行功能。

$('#findemp').click(function() { 

     showSpinner('#loading'); 
     setTimeout(function() { 
     getempData(); 
     hidespinner();}, 1000);  
    }); 

function getempData() 
{ 
    var empNumber = $("#employeenumber").val();  
    var empdetail = JSON.parse(window.Helper.getEmpDetails(empNumber)); 
    //transition to a result page here 
}

來源

2012-05-23 14:32:43 lazyguy

Spinner在Android中使用時未顯示

回答

相關問題