blocks|key|3167720|text|文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3167721|3167722|http://jquerymobile.com/demos/1.0b1/docs/api/methods.html|unordered-list-item|offset|length|3167723|3167724|显示页面加载消息，可通过$.mobile.loadingMessage进行配置。示例：|3167725|//cue+the+page+loader+++++++++++
$.mobile.showPageLoadingMsg();|code-block|syntax|javascript|3167726|隐藏页面加载消息，可通过$.mobile.loadingMessage进行配置。示例：|3167727|//cue+the+page+loader+++++++++++
$.mobile.hidePageLoadingMsg();++|3167728|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1L|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|H|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|M|7|1A|8|@]|9|@]|A|$N|O]]|$1|T|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|D]]]]

Docs: 

<ul>
<li><a href="http://jquerymobile.com/demos/1.0b1/docs/api/methods.html" rel="nofollow">http://jquerymobile.com/demos/1.0b1/docs/api/methods.html</a></li>
</ul>

Show the page loading message, which is configurable via $.mobile.loadingMessage.
Example:

<pre><code>//cue the page loader 
$.mobile.showPageLoadingMsg();
</code></pre>

Hide the page loading message, which is configurable via $.mobile.loadingMessage.
Example:

<pre><code>//cue the page loader 
$.mobile.hidePageLoadingMsg(); 
</code></pre>

blocks|key|265530|text|我刚刚发现的一种简单方法是在z-index和opacity中使用固定的背景|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|265531|添加此CSS：|265532|.ui-loader-background+{
++++width:100%25;
++++height:100%25;
++++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;
}|code-block|syntax|javascript|265533|ui-loader-background是一个自定义类，但是在显示加载微调器时，ui-loading是由JQM添加到<html>元素的。|265534|并在你的身体中添加这个元素：|265535|<div+class="ui-loader-background">+</div>|265536|示例：http://jsfiddle.net/5GB6B/1/|265537|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/5GB6B/1/^0|E|7|M|7|0|0|0|0|K|14|A|1M|6|0|0|0|3|S|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|U|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

A simple way I've just found is to use a fixed background with <code>z-index</code> and <code>opacity</code>:
Add this CSS:
<pre><code>.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;
}
</code></pre>
<code>ui-loader-background</code> is a custom class, but <code>ui-loading</code> is added by JQM to the <code>&lt;html&gt;</code> element when the loading spinner is shown.
And add this element in your body:
<pre><code>&lt;div class=&quot;ui-loader-background&quot;&gt; &lt;/div&gt;
</code></pre>
example : <a href="http://jsfiddle.net/5GB6B/1/" rel="nofollow noreferrer">http://jsfiddle.net/5GB6B/1/</a>

blocks|key|264100|text|在我的例子中，我使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264101|$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text:+"Cargando",
textVisible:+true
});|code-block|syntax|javascript|264102|显示加载自定义消息并禁用整个页面。|264103|当你完成你的任务时，你需要：|264104|$.mobile.loading("hide");
$("body").removeClass('ui-disabled');|264105|希望能帮助你|264106|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In my case I use:

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

Shows loading custom message and disable the entire page.

When you've finish your task, then you need to:

<pre><code>$.mobile.loading("hide");
$("body").removeClass('ui-disabled');
</code></pre>

Hope helps you

blocks|key|265588|text|我对Xorax提供的工作解决方案做了一个小编辑，将加载器背景移到浏览器窗口的最左边，因为我注意到在我的Chrome浏览器中有一些区域没有完全覆盖：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|265589|.ui-loader-background+{
++++width:100%25;
++++height:100%25;
++++left:0;
++++top:0;
++++margin:+0;
++++background:+rgba(0,+0,+0,+0.3);
++++display:none;
++++position:+fixed;
++++z-index:100;
}|code-block|syntax|javascript|265590|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I've made a small edit to the working solution provided by Xorax to move the loader background to the leftmost of the browser window as I noticed in my Chrome browser there was some area not fully covered:

<pre><code>.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;
}
</code></pre>

Actually i can call this code

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

to disable all buttons on my page. But i don't know how good is the performance when i have a lot of button on my page.

I saw a trick that we create a loading indicator overlay, which is above all element on the page => user can not click on the buttons anymore

is there any way to reuse the loading overlay of jquery mobile to archive the above trick? I'm not good at CSS so hopefully someone can help me.

Thanks

Edited:

i ended up with using jquery.blockUI plugin for jQuery and it works as expected.
And i added the default div with css from jquery mobile so that i still have the loading message of jquery mobile and the behaviour that i wanted

<a href="http://jsfiddle.net/peacemoon/rRKRr/3/" rel="noreferrer">Working sample here</a>

jquery mobile, disable all button when loading overlay is showed

jQuery

实际上我可以调用这段代码$(":input").attr("disabled",true); //Disable all input fields禁用我页面上的所有按钮。但是当我的页面上有很多按钮时，我不知道性能有多好。我看到了一个技巧，我们创建了一个加载指示器覆盖，这是最重要的元素在页面上，=>用户不能再点击按钮有没...

问jquery移动端，显示加载覆盖时禁用全部按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery移动端，显示加载覆盖时禁用全部按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery移动端，显示加载覆盖时禁用全部按钮
EN