我在 jquery mobile 中使用非基于 ajax 的导航，因为我想在每个页面上加载和运行特定的脚本。但问题是当我在 jquery mobile 中使用基于非 ajax 的导航时。加载器不显示。我通过使用禁用了 ajax
data-ajax="false"
每个锚链接。
是否有任何快速的方法来显示每个页面转换的加载器而无需编写自定义函数？
【问题讨论】：
$('*[data-ajax=false]').click(function() { $('#loader').fadeIn(100); });
标签： jquery jquery-mobile
我认为禁用 ajax 的微调器是不可能的。我的意思是您可以在页面加载之前或之后将其闪烁一秒钟，但这有点违背了目的。但是，我确实知道在特定页面上加载和运行特定脚本是可能的。所以也许你的问题应该是我如何让特定的脚本在特定的 JQM 页面中运行？
绑定到 pageinit 将帮助您为特定页面执行自己的 javascript。以下内容仅在加载了 id 为 page2 的 JQM 页面时才会执行。只需将其放在外部脚本中并在页面顶部链接到它即可。
$(document).on('pageinit','#page2',function(){
$('#appendMe').append('This text was appended');
});
如果您想加载外部脚本/库，请使用 $.getScript();方法。在我的示例中，我将在加载 id 为 page3 的 JQM 页面时加载并执行 spin.js 库。 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 来说服你我不只是在编造这一切。呵呵
【讨论】：
有一个显示/隐藏加载器的客户端方法：
$.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg();
【讨论】：