如何在jquery mobile中显示非ajax导航中的加载程序？ [英] how to show loader in non ajax navigation in jquery mobile?

问题描述

我在jquery mobile中使用非基于ajax的导航，因为我想在每个页面上加载并运行特定的脚本。但问题是，当我在jquery mobile中使用非基于ajax的导航时。装载机没有出现。我使用

I ma using non ajax based navigation in jquery mobile because I want to load and run a specific script on each page. But the problem is that When I use the non ajax based navigation in jquery mobile. The loader doesn't show up. I disabled the ajax by using

data-ajax="false"

每个锚链接。

有没有快速的方法来显示加载器的每个页面转换而不必写自定义功能？

Is there any quick way to show loader with each page transition without having to write custom function ?

推荐答案

我认为没有禁用ajax的微调器是可能的。我的意思是你可以在页面加载之前或之后将它闪烁一秒钟，但这有点挫败了目的。但我知道在特定页面上加载和运行特定脚本是可能的。所以也许你的问题应该是如何让特定的脚本在特定的JQM页面中运行？

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?

绑定到pageinit将帮助您为特定页面执行自己的javascript。以下内容仅在加载了id为page2的JQM页面时执行。只需将其放在外部脚本中，然后在页面的头部链接即可。

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');    
});

如果要加载外部脚本/库，请使用$ .getScript（）;方法。在我的示例中，我将在JQM页面上加载并执行 spin.js 库加载了page3的id。 Spin.js只是在页面中放置一个微调器。

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);
    });
});​​​​​​​​​​​​​​​​

这是一个 jsfiddle 来说服你我不只是把这一切都搞定。呵呵

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

这篇关于如何在jquery mobile中显示非ajax导航中的加载程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！