我在 jquery mobile 中使用非基于 ajax 的导航,因为我想在每个页面上加载并运行特定的脚本。但问题是,当我在 jquery mobile 中使用非基于 ajax 的导航时。装载机没有出现。我通过使用禁用了ajax
data-ajax="false"
每个 anchor 链接。
是否有任何快速方法可以在每次页面转换时显示加载程序,而无需编写自定义函数?
最佳答案
我认为禁用 ajax 的微调器是不可能的。我的意思是你可以在页面加载之前或之后闪烁它一秒钟,但这有点达不到目的。但我确实知道可以在特定页面上加载和运行特定脚本。所以也许您的问题应该是如何让特定脚本在特定 JQM 页面中运行?
绑定(bind)到 pageinit 将帮助您为特定页面执行您自己的 javascript。以下代码仅在加载 id 为 page2 的 JQM 页面时执行。只需将其放入外部脚本中并链接到页面的头部即可。
$(document).on('pageinit','#page2',function(){
$('#appendMe').append('This text was appended');
});
如果您想加载外部脚本/库,请使用 $.getScript();方法。在我的示例中,我将加载并执行 spin.js加载 id 为 page3 的 JQM 页面时的库。 Spin.js 只是在页面中放置了一个小微调器。
$(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);
});
});
这是一个jsfiddle为了让你相信这一切不是我编造的。呵呵
关于jquery - 如何在jquery mobile中的非ajax导航中显示加载程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10681125/