建立

当前版本的 JQuery Mobile 是 1.4.5,可以在这里下载: https//jquerymobile.com/

  • 下载 zip 文件并解压缩所有文件。
  • 在应用程序内部(在 www 文件夹中)创建库(或 lib)文件夹。
  • 在 lib 文件夹中创建一个 jquery-mobile 文件夹(我将其命名为 jqm)。
  • 将你提取的所有 jquery-mobile 文件放在 jquery-mobile 文件夹中。你现在可以链接到 index.html 文件中的这些文件。

在下面的代码中,URL 包含 javascript 和 css 文件。你也可以按照上面的要点进行操作,并按照它在本地计算机上的路径包含它,即:

<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>

这些是 css 和 js 文件的缩小版本。你也可以在开发过程中包含非缩小版本,以便在需要深入了解时更容易阅读。如果你这样做,我建议在部署到生产时将它们切换回缩小版本。

<!-- it is imported inside head tags. -->

<!-- no additional files needed, if css and js referred with full path. -->

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Viewport setup. -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- jQuery Mobile styles come first before js. -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Basic jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- jQuery Mobile library kind of extends upon jQuery -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

 <!-- example page element using jQuery mobile tags: -->      
 <div data-role="page" id="pageone">

     <div data-role="header" id="pageone-header">
        <h3>Insert Page header Here</h3>
     </div><!-- /header -->

     <div role="main" class="ui-content" id="pageone-content">
        <center><h3>Page title</h3></center>
        <!-- All HTML for the page content goes here -->
     </div><!-- /content -->
        
    <div data-role="footer" data-position="fixed">
        <h4>Insert Page footer Here</h4>
    </div><!-- /footer -->

 </div>
  
 </body>
 </html>