Home/ Questions/Q 6870587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:42:05+00:00

I still don’t understand how I am supposed to write my pages in a

  • 0

I still don’t understand how I am supposed to write my pages in a jQuery Mobile middle-complexity project, I mean… here’s my hello world page:

<!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>

Nice, isn’t it?

My third page (id=”page3″), for example, will be huge. Obviously I don’t want to write all my pages in a single html file, I will rather have a “page3.html” file.

I don’t want to avoid the nice jQuery mobile’s ajax navigation feature, so what’s the right way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can have contents of “page3” in a different html file as

    content of Page3.html as:

    <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>

    Then on the main page you can have link for that page3.html as

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