jQuery Mobileの読み込みメッセージについて質問があります。デフォルトではjquerymobile loading messageテーマ
、ロードメッセージのテーマは、jQueryのモバイルコードによると、aです：私はこのdiv要素のデフォルトのテーマを変更する方法を知っていただきたいと思い
<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div>
、私はそれを把握することはできません。
ありがとうございます。
読み込み中のメッセージがテーマではないようです。 、
// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $("<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>");
これはui-body-a
おそらく最も安全な方法はdiv.ui-loader.ui-body-aをオーバーライドすることで、常に選ぶことを意味http://jsfiddle.net/N7Z9e/95/
問題は実際にはフレームワークであり、CSSやhere-my-jsの回避策ではありません。通常、私はCSSソリューションをjsワンにしたいと思っていますが、このようなCSSソリューションを使用すると、別の 'e'スウォッチをテーマにしていた場合は、手動でe-ishオーバーライドを手動で更新する必要があります'a' swatch;忘れがちです。ジャスパーのjsソリューションはこの問題を回避していますが、最初は設定可能なローダーがはるかに優れています。 – jinglesthula
回答を参照してください：あなたは、ソースコードで見ると
次のように表示されます古いバージョンの場合は、jQuery Mobile 1.1.0+の下記を参照してください。
私はあなたがmobileinitイベントハンドラで設定できる変数を認識していないんだけど、文書の準備ができたとき、あなたはtheme'dクラスを変更することができます。ここでは
//run the code on `document.ready`
jQuery(function ($) {
//find the loader div and change its theme from `a` to `e`
$('.ui-loader').removeClass('ui-body-a').addClass('ui-body-e');
});
は、（上記溶液のjsfiddleですあなたは）ボタンのリストから読み込みダイアログのテーマを変更することができますhttp://jsfiddle.net/jasper/eqxN9/1/
jQueryのモバイル1.1.0あなたには、いくつかのデフォルト値を設定することができ、このためのいくつかのサポートが追加されています
loadingMessage文字列、デフォルト： "ロード" ページがロードされたときに を表示されるテキストを設定します。 falseに設定すると、メッセージは と表示されません。
loadingMessageTextVisibleブール、デフォルト：偽ローディングメッセージが表示されたときにテキスト を表示するかどうか。読み込みエラーの場合、テキストは常に です。
loadingMessageTheme文字列、デフォルト：テキストが表示されているときにロード メッセージボックスが使用する「」テーマ。
出典：あなたがあるため、新たなローダ・デザインの仕事にローダテーマオーバーライドのためtrueにloadingMessageTextVisibleを設定する必要がありますhttp://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html
注意。あなたがメッセージを設定していない場合は、色を変更する背景はありません...ここで
はデモンストレーションです：ドキュメントを通じてhttp://jsfiddle.net/vHJnd/
迅速PERUSEあなたは今だけでなく、その場でこれを行うことができますことを示しています
$.mobile.showPageLoadingMsg("a", 'loading message');
あなたはにshowPageLoadingMsg()機能にこれらの引数を追加することができますテーマとメッセージを強制的に表示します。これは、デフォルト値を設定する代わりの方法です。ここにあなた、
をしかし、あなたはそれを周りにプレイしたい場合：彼らがリリースまあ、私はjQM ThemeRollerのツールをお勧めしhttp://jsfiddle.net/vHJnd/1/
ベストソリューション:) –
well ...フレームワークを柔軟に/構成可能にするための最良のソリューション;） – jinglesthula
@jinglesthula **最新のjQuery Mobileの安定版では、いくつかのオプションがありますローダーのために設定することができます。 – Jasper
：ここ
はデモですgo：
JS
$('.changeLoadingBackgroundColor').click(function() {
$.mobile.showPageLoadingMsg();
var bgColor = $(this).attr('id');
var loader = $('div.ui-loader');
loader.removeAttr('class');
loader.attr('class','ui-loader ui-body-'+bgColor+' ui-corner-all');
$(this).trigger('create');
});
HTML
<div id="test" data-role="page">
<div data-role="content">
Change the Background Color of the Loading Message, Choose a <b>Theme</b>
<div data-role="controlgroup" data-type="horizontal">
<input type="button" id="a" class="changeLoadingBackgroundColor" value="A"/>
<input type="button" id="b" class="changeLoadingBackgroundColor" value="B"/>
<input type="button" id="c" class="changeLoadingBackgroundColor" value="C"/>
<input type="button" id="d" class="changeLoadingBackgroundColor" value="D"/>
<input type="button" id="e" class="changeLoadingBackgroundColor" value="E"/>
<input type="button" id="custom-color" class="changeLoadingBackgroundColor" value="Custom Color"/>
</div>
</div>
</div>
CSS
.ui-body-custom-color,
.ui-dialog.ui-overlay-b {
border: 1px solid #7FFF00 /*{b-body-border}*/;
background: #cccccc /*{b-body-background-color}*/;
color: #8A2BE2 /*{b-body-color}*/;
text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
font-weight: normal;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6 /*{b-body-background-start}*/), to(#ADFF2F /*{b-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/);
}
.ui-body-custom-color,
.ui-body-custom-color input,
.ui-body-custom-color select,
.ui-body-custom-color textarea,
.ui-body-custom-color button {
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-custom-color .ui-link-inherit {
color: #8A2BE2 /*{b-body-color}*/;
}
.ui-body-custom-color .ui-link {
color: #00FFFF /*{b-body-link-color}*/;
font-weight: bold;
}
.ui-body-custom-color .ui-link:hover {
color: #00FFFF /*{b-body-link-hover}*/;
}
.ui-body-custom-color .ui-link:active {
color: #00FFFF /*{b-body-link-active}*/;
}
.ui-body-custom-color .ui-link:visited {
color: #00FFFF /*{b-body-link-visited}*/;
}
記載されているのjsフィドル（http://jsfiddle.net/N7Z9e/95/）良い出発点です。私はこれを少し上に構築しています。基本スタイルをオーバーライドするには重要なことがあります。私はそれを使用して憎むが、他の良い方法は時々それを回避するために。
/* override loader */
div.ui-loader.ui-body-a {
border: 3px solid #104070 /*{a-body-border}*/;
background-color: rgba(0, 62, 87, .9); color: rgba(0, 62, 87, .9);
background-image: none;
font-weight: normal;
}
/* Control the text placement, font size, etc..*/
div.ui-loader h1 { margin-top:10px; margin-bottom:4px; color:#fff !important;}
/* Change The Spinner Image And Styles *
.spinner{
}
重要な注意：JQMの将来のバージョンでは、ローダーはローダーでメッセージを制御することが容易になります。 gitハブ経由でいくつかの改良点を見ることができます。
jQuery Mobile 1.1では、ローダーがテーマ設定可能になりました。デモ/テストページはここにある： http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html
古い「正しい」回答は廃止されました。ハックする必要はありません:) – jinglesthula
私は、このために非常に成功したソリューションを持っている...
あなたは自分のjquery-mobile.jsに行きます。</span>の< H1> <> <のdivクラス= ' "+ B +"'> <スパンクラス= 'UI-アイコンローディング'：あなたは、find "defaultHtml"
運
これは、jQueryのモバイル1.1.0のように更新されました。ローダーの外観を変更するためにいくつかのデフォルト設定があります：http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html（私の答えは**アップデート**参照） – Jasper