如何在jquery mobile中更改默认加载ajax loader gif
我已经看过jquery mobile的文档,但无法理解如何将它集成到我的移动网站上。 文档在这里
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
实际上gif图像不会在2.x安卓设备上制作动画,所以我正在考虑制作一种只预装小部件的文本。
我尝试通过这样的css来改变它
.ui-icon-loading { background: url(themes/images/custom-ajax-loader.gif); }
但新的图像不能正确缩放,旧的背景仍然可见。
我是一个完整的菜鸟与javascript.can有人PLZ帮我这个?
你提到的是jQM 1.2 Alpha Docs所以我的答案基于这个jQM版本。
您可以在下面找到2个更改默认加载程序映像的选项。
解决方案1
如jQM 1.2 Alpha文档中所述:
当jQuery Mobile启动时,它会触发文档对象上的mobileinit事件。 要覆盖默认设置,请绑定到mobileinit。 由于mobileinit事件是立即触发的,因此您需要在加载jQuery Mobile之前绑定事件处理程序。 按以下顺序链接到JavaScript文件:
要全局配置加载对话框,可以在mobileinit事件期间在其原型上定义以下设置:
$( 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 = ""; });
您可以在下面找到一个工作示例,您可以在其中完全自定义html原型选项中的加载程序。
例:
Page Title Test
解决方案2
覆盖用于描述页面加载器的默认CSS样式。
EDITED
对于jQM 1.1.1版本 ,有以下可配置选项:
- loadingMessage字符串,默认:“loading”
设置加载页面时显示的文本。 如果设置为false,则根本不会显示该消息。- loadingMessageTextVisible布尔值,默认值:false
显示加载消息时是否应显示文本。 对于加载错误,文本始终可见。- loadingMessageTheme字符串,默认值:“a”
文本可见时加载消息框使用的主题。
代码示例:
Page Title Test
此外,您可以尝试覆盖用于设置jQM加载器样式的默认CSS。 更具体地说,您可以修改或覆盖部分加载屏幕中的样式和加载图标部分中用于描述页面加载器的样式。
你会在这里找到jQM 1.1.1中使用的CSS。
/* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; } /* loading screen */ .ui-loading .ui-loader { display: block; } .ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; } .ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; } .ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; } .ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; } .ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; } .ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } .ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; } .ui-loader-textonly { padding: 15px; margin-left: -115px; } .ui-loader-textonly .ui-icon { display: none; } .ui-loader-fakefix { position: absolute; }
- 如何在Android中使用youtube应用打开YouTube链接(使用Dreamweaver CS6)?
- 无法从第二个包含的js文件中的第一个包含的javascript文件调用函数
- 禁用移动设备的HTML拼写帮助
- 离线HTML5或原生SDK,用于跨平台应用程序开发或JQUERY移动
- html5video标签未能在phonegap android中使用cordova 2.9.0和jquery1.9.0播放.mp4video?
- 使用Jquery Mobile进行XML解析
- 如何从Android移动设备键盘获取keyCodes?
- 如何使用原生Android 2.1浏览器中的javaScript检查与服务器的连接?
- Android的氛围