Question

我正在使用WebViewClient在Android中创建Phonegap / Jquery移动应用程序，当用户点击按钮时，我想在加载JNI / javascript函数时显示微调器。但是我无法使用下面的代码执行此操作。

注意： 如果我删除对JNI / Javascript函数的调用，则微调器按预期显示。 Helper是一个java类，它从DroidGap onCreate（）方法注册为appView.addJavascriptInterface（helperObject，“Helper”）;

此外，如果粘贴为.html并通过浏览器浏览的副本将起作用（当然我也没有调用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>

Answer 1

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();

隐藏移动微调器。

Answer 2

因此使用超时功能似乎有点工作。它不是解决方案，但至少我看到微调器已经有一段时间了，然后执行了该函数。

$('#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
}

在Android中使用时，Spinner未显示

2 个答案: