Javascript 如何在jquery mobile中更改默认加载ajax加载程序gif
我已经看过jquery mobile的文档，但不知道如何将其集成到我的移动网站上。文件在这里Javascript 如何在jquery mobile中更改默认加载ajax加载程序gif,javascript,android,jquery,mobile,jquery-mobile,Javascript,Android,Jquery,Mobile,Jquery Mobile,我已经看过jquery mobile的文档，但不知道如何将其集成到我的移动网站上。文件在这里 http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html 事实上，gif图像在2.x android设备上并没有动画效果，所以我正在考虑制作一个纯文本的预加载小部件 我试着像这样通过css来改变它 .ui-icon-loading { background: url(themes/images/custom-a
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
我完全不懂javascript。有人能帮我吗？你提到的是jQM 1.2 Alpha文档，所以我的答案基于这个jQM版本 下面您可以找到两个选项来更改默认加载程序映像 解决方案1 如jQM 1.2阿尔法文件所述： 当jQuery Mobile启动时，它会在文档对象上触发一个mobileinit事件。要覆盖默认设置，请绑定到mobileinit。因为mobileinit事件是立即触发的，所以在加载jQuery Mobile之前需要绑定事件处理程序。按以下顺序链接到JavaScript文件：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
您提到的是jQM 1.2 Alpha文档，因此我的答案基于此jQM版本 下面您可以找到两个选项来更改默认加载程序映像 解决方案1 如jQM 1.2阿尔法文件所述： 当jQuery Mobile启动时，它会在文档对象上触发一个mobileinit事件。要覆盖默认设置，请绑定到mobileinit。因为mobileinit事件是立即触发的，所以在加载jQuery Mobile之前需要绑定事件处理程序。按以下顺序链接到JavaScript文件：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.textonly = false;
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
顺便问一下，我使用的是最新的稳定版本1.1.1…这个版本有什么不同吗？是的，不同。我以为你在使用jQM 1.2，因为发布的链接引用了jQM 1.2。实际上，文档指向了同一个东西，所以我粘贴了它…我不知道…谢谢你指出…那么我应该为1.1.1使用什么呢？我已经为jQM 1.1.1添加了可能的解决方案。我希望这有帮助：）顺便问一下，我使用的是最新的稳定版本1.1.1…这个版本不同吗？是的，不同。我以为你在使用jQM 1.2，因为发布的链接引用了jQM 1.2。实际上，文档指向了同一个东西，所以我粘贴了它…我不知道…谢谢你指出…那么我应该为1.1.1使用什么呢？我已经为jQM 1.1.1添加了可能的解决方案。我希望这有帮助：）