JQuery навигация с несколькими файлами страниц - PullRequest
Новая
       21

JQuery навигация с несколькими файлами страниц

0 голосов
/ 22 ноября 2011

Я до сих пор не понимаю, как я должен писать свои страницы в проекте 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".

Я не хочу отказываться от функции ajax-навигации в хорошем jQuery mobile, так какой же это правильный путь?

Ответы [ 2 ]

1 голос
/ 23 ноября 2011

вы можете иметь содержимое "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>
0 голосов
/ 22 ноября 2011

Я бы AJAX загружал содержимое по запросу. Таким образом, вы загружаете ресурсы только тогда, когда их просят.

Если хотите, вы можете предварительно загрузить изображения после загрузки документа и т. Д.

...