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 回答