2

WebViewClient を使用して Android で Phonegap/Jquery モバイル アプリを作成しています。ユーザーがボタンをクリックすると、JNI/javascript 関数を読み込んでいるときにスピナーを表示したいと思います。ただし、以下のコードではそうすることができません。

注: JNI/Javascript 関数の呼び出しを削除すると、スピナーが期待どおりに表示されました。Helper は、DroidGap の onCreate() メソッドから appView.addJavascriptInterface(helperObject, "Helper"); として登録される Java クラスです。

また、コピーを .html として貼り付けてブラウザで閲覧すると機能します (もちろん、そのときも JNI/Javascript 関数を呼び出していません)。つまり、sleep() 時間があればスピナーが表示されます。ただし、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>
4

2 に答える 2

1

Spin.js は問題ありませんが、既に JQuery モバイルを使用している場合は、組み込みのスピナーを使用することをお勧めします。 

<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-22T18:50:58.957 に答える
0

そのため、タイムアウト機能を使用すると、うまく機能しているようです。それは解決策ではありませんが、少なくともしばらくの間スピナーが表示され、その後関数が実行されました。

$('#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-23T14:32:43.957 に答える