建立
当前版本的 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>