2

ハッシュタグを使って複数ページのJQMサイトを作っています。例: index.html#a ページの 1 つで、マップを初期化する必要があります。たとえば、index.html#map とします。しかし、マップの初期化スクリプトをどこに配置しても、index.html が最初に読み込まれたときにスクリプトが実行されることは避けたいと思いました。

マップ スクリプトをいくつかのボタンに関連付けることはできますが、誰かが index.html#map を直接ロードしたときにマップをロードできるようにしたいと考えています。

では、JavaScript をサブページ (ハッシュタグのあるページ) に関連付けるにはどうすればよいでしょうか?

4

2 に答える 2

1

すべてのページが 1 つの HTML ファイルの一部であることを願っています。私が正しければ、この構文を使用する必要はありません。

index.html#map

これで十分です：

#map

これがあなたのHTMLだとしましょう：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

次に、JavaScript を特定のページに関連付けるには、次の構文を使用します。

$(document).on('pagebeforeshow', '#index', function(){       
    alert('Index page');
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('Second page');
});

動作中の jsFiddle EXAMPLEを次に示します。

また、私の個人ブログARTICLEも参照してください。jQuery Mobile ページのイベントを処理するのに役立ちます。または、私の他のANSWERを見てください。

于 2013-01-28T13:14:32.660 に答える
0

コールバック パラメータを使用します。

$(document).ready(function(){
var s = document.createElement("script");
s.type = "text/javascript";
s.src  = "http://maps.google.com/maps/api/js?v=3&sensor=true&callback=gmap_draw";
window.gmap_draw = function(){
   alert ("Callback code here");
};
$("head").append(s);  
});

コールバックがグローバルであることを確認してください。ここで対応するスレッドを見つけることができます: lazy load google maps api v3 jQuery callback

于 2013-01-28T13:16:27.233 に答える