2012-11-22 22 views
13

我嘗試顯示我的應用程序中的活動指標。我正在使用activity.js作爲活動指標。這一個在瀏覽器和iPhone上工作正常但它不適用於Android設備。jQuery手機活動指標不顯示在android

我不知道爲什麼指標不工作在Android設備。

這裏是活動的指標我的示例代碼:

function showIndicator() { 
    console.log("inside show indicator"); 
    applyOverLay(); 
    var showIndicator = document.createElement("div"); 
    showIndicator.setAttribute("class", "activity-indicator"); 
    document.body.appendChild(showIndicator); 
    $('.activity-indicator').activity({ 
     width: 5, 
     space: 1, 
     length: 3, 
     color: '#fff' 
    }); 
} 

function applyOverLay() { 
    var overlay = document.createElement("div"); 
    overlay.setAttribute("id", "overlayAttr"); 
    overlay.setAttribute("class", "overlay"); 
    document.body.appendChild(overlay); 
} 

function hideindicator() { 
    $('.activity-indicator').activity(false); 
    setTimeout(function() { $(".activity-indicator").empty().remove(); }, 0); 
    setTimeout(function() { $(".overlay").empty().remove(); }, 0); 
} 

function loadhtmlpage() { 
    //location.href='#refillReminder'; 
    $.mobile.changePage("#refillReminder"); 
    showIndicator(); 
    hideindicator(); 
} 

style.css: 

.activity-indicator { 
    padding: 10px; 
    position: absolute; 
    top: 50%; 
    left: 45%; 
    z-index: 1001; 
} 
+1

如果你提供你所使用的軟件的版本號這將有助於(如jQueryMobile)以及您是在瀏覽器上還是在具有Web視圖的已編譯應用程序中看到此行爲。 –

回答

1

我用下面的代碼顯示在Android..try本地活動的指標這個..它可以幫助..

document.addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
    $(document).bind("ajaxSend", function() { 
     navigator.notification.activityStart("App Name","Loading..."); 
    }).bind("ajaxStop", function() { 
     navigator.notification.activityStop(); 
    }).bind("ajaxError", function() { 
     navigator.notification.activityStop(); 
    });  

} 
1

也許您應該嘗試在負載頁面方法中顯示指示符,並向頁面顯示方法添加處理程序#refillReminder jquery頁面將其關閉。

我已經使用了jQuery Mobile默認指標,並嘗試在像ajax調用這樣的長操作之前的同一頁中顯示並將其隱藏在始終處理程序中。

另外它似乎很奇怪,你試圖隱藏它rigre後顯示它與0超時。

1

你可以使用默認的jQuery Mobile的活動的指標作爲備用,使用:

$.mobile.loading('hide'); //to hide the spinner 
$.mobile.loading('show'); //to show the spinner 

的組件非常靈活,你可以使用主題或覆蓋紡紗GIF。

更多的信息在這裏Jquery Mobile Loader

1

Android瀏覽器稍慢比桌面瀏覽器。因此,對於你的情況,該指標可能需要花費時間在Android瀏覽器中加載,但由於我提到的問題,請求已在該時間內完成,指標沒有得到顯示的機會,嘗試使用CSS樣式,添加/刪除類,並儘可能避免使用JavaScript的內聯CSS樣式。 的活動裝載機嘗試這樣的事:

http://jsbin.com/oPIyuqUk/1/edit?html,css,js,output

或在這裏嘗試jQuery Mobile的裝載機:

http://demos.jquerymobile.com/1.2.1/docs/pages/loader.html