jquery mobile ajax navigation,how to show loader in non ajax navigation in jquery mobile?

该博客讨论了如何在Ajax禁用的情况下,在jQuery Mobile页面加载时执行特定的JavaScript。通过绑定到'pageinit'事件,可以确保在特定页面加载时运行自定义脚本。示例中展示了如何在页面加载时动态加载spin.js库,并创建一个旋转加载指示器。此外,还提供了一个jsFiddle链接以验证实现。
摘要由CSDN通过智能技术生成

I don't think that a spinner with ajax disabled is possible. I mean you could flash it for a second before or after the page is loaded but that kinda defeats the purpose. I do however know that loading and running specific script on specific pages is possible. So maybe your question should be how do I get specific scripts to run in specific JQM pages?

Binding to pageinit will help you execute your own javascript for specific pages. The following will only execute when a JQM page with the id of page2 is loaded. Just put this in an external script and link to it in the head of your pages.

$(document).on('pageinit','#page2',function(){

$('#appendMe').append('This text was appended');

});

If you want to load an external script/library use the $.getScript(); method. In my example I am going to load and execute the spin.js library when a JQM page with the id of page3 is loaded. Spin.js just puts a little spinner in the page.

​​$(document).on('pageinit','#page3',function(){

$.getScript('http://fgnass.github.com/spin.js/dist/spin.min.js', function(){

//the following code gets executed after spin.js is loaded

var opts = {

lines: 13, // The number of lines to draw

length: 7, // The length of each line

width: 4, // The line thickness

radius: 10, // The radius of the inner circle

rotate: 0, // The rotation offset

color: '#000', // #rgb or #rrggbb

speed: 1, // Rounds per second

trail: 60, // Afterglow percentage

shadow: false, // Whether to render a shadow

hwaccel: false, // Whether to use hardware acceleration

className: 'spinner', // The CSS class to assign to the spinner

zIndex: 2e9, // The z-index (defaults to 2000000000)

top: 'auto', // Top position relative to parent in px

left: 'auto' // Left position relative to parent in px

};

var target = document.getElementById('spin');

var spinner = new Spinner(opts).spin(target);

});

});​​​​​​​​​​​​​​​​

Here is a jsfiddle to convince you I'm not just making this all up. Hehe

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值