2013-08-23 50 views
3

我試圖阻止jQuery Mobile在調用changePage時隱藏加載微調器。

程序流程是這樣的,首先點擊一個鏈接,裏面有這樣定義它的Click事件:一旦點擊該鏈接

$('body').delegate('.library-link', 'click', function() { 
    $.mobile.loading('show'); 
    $.mobile.changePage($('#page-library')); 
    return false; 
}); 

,該pagebeforeshow事件被激發,這將觸發功能來填充從本地存儲頁面,或者做一個Ajax調用來獲取數據。

$(document).on('pagebeforeshow', '#page-library', function(event){ 
    ui.populate_data(); 
}); 

ui.populate_data()我們從本地存儲獲取數據或進行ajax調用。

ui.populate_data = function() { 
    if (localdata) { 
     // populate some ui on the page 
     $.mobile.loading('hide'); 
    } else { 
     // make an ajax call 
    } 
}; 

如果數據存在,我們將數據加載到容器中並隱藏加載微調器。如果不是它使AJAX調用,這對完整的保存在本地存儲數據,並調用ui.populate_data()

的問題是,在pagebeforeshow事件結束後,changePage呼籲$.mobile.loading('hide'),即使數據可能還沒到達那裏。我找不到任何辦法阻止changePage從藏身的微調,除了通過暫時重新定義$.mobile.loading,感覺非常錯誤的:

$('body').delegate('.library-link', 'click', function() { 
    $.mobile.loading('show'); 
    loading_fn = $.mobile.loading; 
    $.mobile.loading = function() { return; }; 
    $.mobile.changePage($('#page-library'), {showLoadMsg: false}); 
    return false; 
}); 

和隱藏微調在我的UI功能之前:

ui.populate_data = function() { 
    if (localdata) { 
     // populate some ui on the page 
     if (typeof loading_fn === 'function') { 
      $.mobile.loading = loading_fn; 
     } 
     $.mobile.loading('hide'); 
    } else { 
     // make an ajax call 
    } 
}; 

當然,必須有一種方法來完全控制加載小部件的顯示和隱藏,但我找不到它。我嘗試通過{showLoadMsg: false}來改變頁面,但正如文檔所建議的,它只是在加載頁面到Ajax上時做的事情,而我並沒有這樣做。

+0

你想完全關閉它? – Omar

+0

我需要能夠手動顯示和隱藏它,但是我必須手動執行它。 – crazystick

+4

試試'$('。ui-loader')。hide();'和'.show() '。你使用的是什麼版本的jq和jqm? – Omar

回答

1

也許這對於很多人來說太多了,但是我發現了一個解決方案,而不是寫在評論中(這對我來說不起作用)。

我使用jquery mobile router,並在頁面的「顯示」事件,我做$.mobile.loading("show");,所以當頁面出現它與加載微調的表現一樣。

雖然隱藏旋轉,我不得不使用$('.ui-loader').hide();,這是不可思議的,我知道...

使用jQuery移動路由器的多很多,但它解決了這個問題。

(也許只是聽正確的事件和觸發的微調也將工作,因爲這是JQMR做什麼...)

我使用JQM 1.4.2 ...

相關問題