web-dev-qa-db-ja.com

jquery mobile、ロードオーバーレイが表示されているときにすべてのボタンを無効にする

実際、私はこのコードを呼び出すことができます

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

ページのすべてのボタンを無効にします。しかし、ページにボタンがたくさんある場合のパフォーマンスがどれほど良いかはわかりません。

読み込みインジケーターオーバーレイを作成するトリックを見ました。これは何よりもページ上の要素です=>ユーザーはボタンをクリックできなくなりました

jquery mobileの読み込みオーバーレイを再利用して上記のトリックをアーカイブする方法はありますか？私はCSSが苦手なので、誰かが私を助けてくれることを願っています。

ありがとう

編集：

私はjQueryにjquery.blockUIプラグインを使用することになり、期待どおりに機能します。そして、jquery mobileのcssでデフォルトのdivを追加したので、jquerymobileの読み込みメッセージと必要な動作がまだあります

ここでの作業サンプル

javascriptbuttonjquery-mobileoverlay
17
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-loader-backgroundはカスタムクラスですが、ui-loadingは、読み込みが表示されたときにJQMによって追加されます。

そしてあなたの体のこの要素：

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

例： http://jsfiddle.net/5GB6B/1/

41
Xorax

私の場合、私は以下を使用します：

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

カスタムメッセージの読み込みを表示し、ページ全体を無効にします。

タスクが完了したら、次のことを行う必要があります。

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

希望はあなたを助けます

14
technology_dreamer

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;
}
1
Got Hima