1

我在 jquery mobile 中使用非基于 ajax 的导航，因为我想在每个页面上加载和运行特定的脚本。但问题是当我在 jquery mobile 中使用基于非 ajax 的导航时。加载器不显示。我通过使用禁用了ajax

data-ajax="false"

与每个锚链接。

有没有什么快速的方法可以在每个页面转换时显示加载器，而无需编写自定义函数？

4

2 回答 2

2

我认为禁用 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来说服你我不只是在编造这一切。呵呵

于 2012-05-21T08:57:45.550 回答
1

有一个客户端方法来显示/隐藏加载器：

$.mobile.showPageLoadingMsg();

$.mobile.hidePageLoadingMsg();

于 2012-05-21T09:06:04.493 回答