点击某个按钮或链接时,触发等待加载效果:
<script>
<!--
$(document).bind("mobileinit", function(){
});
$( function() {
//默认设置,一个小圈圈在转
$('#default').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = false;
$.mobile.showPageLoadingMsg();
} );
//小圈子外围加矩形的背景
$('#loadingMessageTextVisible').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = 'a';
$.mobile.showPageLoadingMsg();
} );
//矩形背景样式为e
$('#loadingMessageTheme').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessageTheme = 'e';
$.mobile.showPageLoadingMsg();
} );
//小圈子下面加上文字
$('#customText').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg( 'a', "Please wait..." );
} );
//只有文字,没有小圈子在转
$('#noSpinner').live( 'tap', function() {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg( 'a', "Please wait...", true );
} );
} );
-->
</script>
HTML代码:
<p><a id="default" data-role="button">Default Loader</a></p>
<p><a id="loadingMessageTextVisible" data-role="button">loadingMessageTextVisible = true</a></p>
<p><a id="loadingMessageTheme" data-role="button">loadingMessageTheme = 'e'</a></p>
<p><a id="customText" data-role="button">Custom Text</a></p>
<p><a id="noSpinner" data-role="button">No Spinner</a></p>
jquery mobile 侧滑插件
jquery mobile 中文手册API
http://www.lampweb.org/jquerymobile/5/11.html
Bootstrap中文网
jQuery插件库