解決策:
jsFiddle の作業: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit
イベントは、jQuery Mobile が初期化される前、jQuery の後に初期化する必要があります。また、これを機能させるには、css にいくつかの追加変更を行う必要があります。
まず、デフォルトui-loader-default
のクラスをオーバーライドする必要があります。これは、不透明度が低すぎて、最後のスピナーが見えにくいためです。不透明度の値を好きなように変更します。
.ui-loader-default {
opacity: 1 !important;
}
そして、これが私たちのスピナーです。カスタム i タグを使用しているため、 を使用する必要がありますdisplay: block
。これがないと、スピナーは非表示になります。
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
これが実際の例です:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>