jQuery Mobile的，禁用所有按鈕時加載疊加顯示

其實我可以把這個代碼jQuery Mobile的，禁用所有按鈕時加載疊加顯示

$(":input").attr("disabled",true); //Disable all input fields

禁用我的網頁上的所有按鈕。但是當我在頁面上有很多按鈕時，我不知道表現有多好。

我看到我們創造一個負載指標覆蓋了一招，這是網頁上的所有元素之上=>用戶無法點擊上面的按鈕了

有什麼辦法重用的jQuery移動的裝載覆蓋歸檔上述技巧？我不擅長CSS，所以希望有人能幫助我。

感謝

編輯：

我結束了使用jquery.blockUI的jQuery插件，它按預期工作。並且我增加了默認的DIV與CSS從jQuery Mobile的，這樣我仍然有jQuery Mobile的的裝載消息，我想

Working sample here

來源

2011-07-06 Peacemoon

我剛剛發現一個簡單的方法是使用一個固定的背景用z-index和不透明度：

添加這個CSS：

.ui-loader-background { 
    width:100%; 
    height:100%; 
    top:0; 
    margin: 0; 
    background: rgba(0, 0, 0, 0.3); 
    display:none; 
    position: fixed; 
    z-index:100; 
} 

.ui-loading .ui-loader-background { 
    display:block; 
}

UI的裝載機背景是一個自定義類，但是JQM會在顯示加載時添加UI加載。

而這種元素在你的身體：

<div class="ui-loader-background"> </div>

例如：

來源

2012-08-03 15:13:58 Xorax

好的技巧，但在Android中失敗，如果在輸入字段爲焦點時顯示加載消息。 –

我終於完成了。在顯示加載消息之前，我必須手動刪除每個輸入的焦點。背景div很有效地防止與頁面的交互。我剛纔評論顯示：在CSS中沒有。 –

工程就像一個魅力！ – spyder

-2

文檔的行爲：

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

顯示頁面加載消息，可通過$ .mobile.loadingMessage進行配置。實施例：

//cue the page loader   
$.mobile.showPageLoadingMsg();

隱藏頁面加載消息，該消息是通過$ .mobile.loadingMessage配置。例子：

//cue the page loader   
$.mobile.hidePageLoadingMsg();

來源

2011-07-06 14:36:38

感謝您的回答。我知道如何隱藏和顯示加載消息。但我的問題是，當顯示此消息時，用戶仍然可以單擊頁面上的按鈕。我只是想知道如何在顯示此消息時有效禁用所有按鈕 – Peacemoon

在我來說，我使用：

$("body").addClass('ui-disabled'); 
$.mobile.loading("show",{ 
text: "Cargando", 
textVisible: true 
});

顯示正在加載的自定義消息並禁用整個頁面。

當你完成你的任務，那麼你需要：

$.mobile.loading("hide"); 
$("body").removeClass('ui-disabled');

希望可以幫助您

來源

2013-06-03 22:18:19

如果您對禁用的主體進行操作，則加載元素也被禁用。所以更好的想法是在div上添加和刪除類，並最終加載元素仍然啓用（在視覺上）。無論如何，添加和刪除'ui-disabled'幫助我:) – Bronek

我做了一個小編輯由Xorax提供的工作解決方案，移動裝載機背景到我在Chrome瀏覽器中注意到的最左邊的瀏覽器窗口，有一些區域沒有完全覆蓋：

.ui-loader-background { 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    margin: 0; 
    background: rgba(0, 0, 0, 0.3); 
    display:none; 
    position: fixed; 
    z-index:100; 
}

來源

2013-07-25 08:12:01

jQuery Mobile的，禁用所有按鈕時加載疊加顯示

回答

相關問題