Question

我有一个标题，在我设计的Android开发的Phone Gap中我的所有页面都很常见。有没有办法在一个页面中对它进行编码，并通过调用在所有页面中使用它。

提前致谢。

Answer 1

从您提到的页面来看，您使用jQuery Mobile作为用户界面的框架吗？如果是这样，您可以使用pagebeforecreate事件将公共页眉和/或页脚复制到所有页面。像这样：

<html lang="en">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.css" type="text/css" />

    <script type="text/javascript" >
        $('div[data-role="page"]').live('pagebeforecreate', function(event, ui){
            $(this).prepend($('#scratch .common-header').clone());
            $(this).append($('#scratch .common-footer').clone());
        });
    </script>
</head>
<body>
    <div data-role="page" id="page-1">
        <div data-role="content" style="min-height: 200px;">
            <h1>Page 1</h1>
            <p>This is the first page.</p>
        </div>
    </div>

    <div data-role="page" id="page-2">
        <div data-role="content" style="min-height: 200px;">            
            <h1>Page 2</h1>
            <p>This is the second page.</p>
        </div>
    </div>

    <div id="scratch" style="display: none;">
        <div class="common-header" data-role="header" data-position="fixed">
            <h1>Common header</h1>
        </div>
        <div class="common-footer" data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#page-1">Page 1</a></li>
                    <li><a href="#page-2">Page 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

“

PhoneGap中的常见页面开发

1 个答案: