Jquery 手机 templated/persistant header/footer Phonegap 中的模板

Question

基于此 question 和互联网上的一些资源，例如 jquery 移动文档，我想出了以下代码：

<!DOCTYPE html>
<!---index.html--->
<html>

    <head>
        <title>Simply Running</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>


        <body>
        <div data-role="page" id="page">

            <div data-role="header">
                <h1>Header</h1>
            </div><!-- /header -->

            <div role="main" class="ui-content" id="content">
                <p>Loading ...</p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>


</html>

然后我有一些JS:

//index.js
$(document).on('pagecreate', '#page', function(event) {
    loadContent("main.html");
});

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
    //Or to load a specific id from one site:
    //$("#main").load( location + " " + #SPECIFIC);
    return true;
}

function clickedLink() { 
    loadContent($(this).attr('href'));
}

$(document).ready(function() {
    $('#content').on('click', 'a', clickedLink);
});

而且我有两个页面只存储了我要添加的内容。

<!--main.html--->    
<div role="main" class="ui-content">
        <p>At the main page.</p>
        <p><a href="second.html">Go to second one.</a></p>
</div><!-- /content -->

和

<!-- second.html--->
<div role="main" class="ui-content" id="content">
        <p>At second page.</p>
        <p><a href="main.html">Back to first one.</a></p>
</div><!-- /content -->

第一页出现了，但是当我点击link时，你可能会看到第二页是如何出现的，然后屏幕突然变白了。我刚接触javaScript，学习了1天。我找不到任何解决方案或屏幕变白的原因。

Answer 1

我想出的解决方案是使用以下方法：

<a onclick="loadContent('whatever.html')"></a> //Better use ontouchstart, see Edit

这也意味着我只需要使用一个loadContent函数：

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
}

$('#content').on('click', 'a', clickedLink); 行不再需要了，我非常喜欢。 :-)

编辑：

onclick="loadContent('whatever.html')"

移动设备不好用，最好用

ontouchstart="loadContent('whatever.html')"

Jquery 手机 templated/persistant header/footer Phonegap 中的模板

Jquery Mobile templated/persistant header/footer template in Phonegap

mobile

jquery

user-interface

cordova