1

各ページで特定のスクリプトをロードして実行したいので、jquerymobileで非ajaxベースのナビゲーションを使用しています。しかし、問題は、jquerymobileで非ajaxベースのナビゲーションを使用する場合です。ローダーが表示されません。を使用してajaxを無効にしました

data-ajax="false"

すべてのアンカーリンクで。

カスタム関数を記述せずに、ページ遷移ごとにローダーを表示する簡単な方法はありますか？

4

2 に答える 2

2

ajaxを無効にしたスピナーは不可能だと思います。つまり、ページが読み込まれる前または後に1秒間フラッシュすることはできますが、それは目的に反します。ただし、特定のページで特定のスクリプトをロードして実行できることは知っています。では、特定のJQMページで特定のスクリプトを実行するにはどうすればよいのでしょうか。

pageinitにバインドすると、特定のページに対して独自のJavaScriptを実行するのに役立ちます。以下は、ページ2のIDを持つJQMページがロードされた場合にのみ実行されます。これを外部スクリプトに入れて、ページの先頭にリンクするだけです。

$(document).on('pageinit','#page2',function(){
    $('#appendMe').append('This text was appended');    
});

外部スクリプト/ライブラリをロードする場合は、$。getScript（）;を使用します。方法。私の例では、page3のIDを持つ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 に答える