jQuery mobile:特定于页面的javascript，hashtag页面

我正在使用主题标签创建一个包含多个页面的 JQM 站点。例如 index.html#a 在其中一个页面上，我需要初始化一个地图，比如 index.html#map。但是我突然想到，无论我将map初始化脚本放在何处，脚本仍然会在索引首次加载时执行.html这是我想避免的。

虽然我可能会将地图脚本与一些按钮相关联，但我也希望能够在有人直接加载 index.html#map 时加载地图。

所以归结为如何将 JavaScript 关联到子页面（带有主题标签的页面）？

我希望

所有这些页面都是单个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示例。

也看看我的个人博客ARTICLE，它会帮助你处理jQuery Mobile页面事件。或者看看我的另一个答案。

使用回调参数：

$(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);  
});

确保回调是全局的。你可以在这里找到相应的线程：懒惰加载谷歌地图 api v3 jQuery 回调

相关内容

最新更新

热门标签：