Question

我仍然不明白我应该如何在jQuery Mobile中间复杂性项目中编写我的页面，我的意思是......这是我的问候世界页面：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Applicazione Web jQuery Mobile</title>
<link href="file:///D|/Programmi/Adobe/Adobe Dreamweaver CS5.5/it_IT/Configuration/Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="file:///D|/Programmi/Adobe/Adobe Dreamweaver CS5.5/it_IT/Configuration/Third Party Source Code/jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="file:///D|/Programmi/Adobe/Adobe Dreamweaver CS5.5/it_IT/Configuration/Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Pagina uno</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a href="#page2">Pagina due</a></li>
            <li><a href="#page3">Pagina tre</a></li>
            <li><a href="#page4">Pagina quattro</a></li>
        </ul>       
    </div>
    <div data-role="footer">
        <h4>Piè di pagina</h4>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Pagina due</h1>
    </div>
    <div data-role="content">   
        Contenuto       
    </div>
    <div data-role="footer">
        <h4>Piè di pagina</h4>
    </div>
</div>

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>Pagina tre</h1>
    </div>
    <div data-role="content">   
        Contenuto       
    </div>
    <div data-role="footer">
        <h4>Piè di pagina</h4>
    </div>
</div>

<div data-role="page" id="page4">
    <div data-role="header">
        <h1>Pagina quattro</h1>
    </div>
    <div data-role="content">   
        Contenuto       
    </div>
    <div data-role="footer">
        <h4>Piè di pagina</h4>
    </div>
</div>

</body>
</html>

很好，不是吗？

例如，我的第三页（id =“page3”）将是巨大的。显然我不想在一个html文件中写下我的所有页面，我宁愿使用“page3.html”文件。

我不想避免使用漂亮的jQuery mobile的ajax导航功能，那么正确的方法是什么？

Answer 1

您可以将“page3”的内容作为

添加到其他html文件中

Page3.html的内容为：

<html>
    <head>
        <title>...</title>             
            <link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
            <script src="jquery-1.4.3.min.js"></script> 
            <script src="jquery.mobile-1.0a1.min.js"></script>

            <script type="text/javascript"> 
                alert('This is Page 3');                
            </script>  

    </head>
    <body>
   <div data-role="page" id="page3">
    <div data-role="header">
        <h1>Pagina tre</h1>
    </div>
    <div data-role="content">   
        Contenuto       
    </div>
    <div data-role="footer">
        <h4>Piè di pagina</h4>
    </div>
</div>
</body>
</html>

然后在主页面上，您可以将该page3.html链接为

<a href="page3.html" data-role="button"  rel="external">Load Page 3</a>

Answer 2

我会在请求时将AJAX加载到内容中。这样，您只需要在他们被要求时加载所需的资源。

如果需要，可以在文档加载后预先加载图像等。

带有多个页面文件的jQuery导航

2 个答案: