jQuery Mobile入门

下载

http://jquerymobile.com/

什么是jQuery Mobile？

按照官方的描述：针对智能手机和平板、做过触摸优化的web框架.

页面添加

1.从CDN引用jQuery Mobile
2.从 jQuerymobile.com下载jQuery Mobile库

jQuery Mobile页面

data-role='page':浏览器中显示的页面
data-role='header':在页面顶层创建工具条(通常用于标题,搜索按钮)
data-role='main':定义页面的内容,例如文本,按钮等
data-role='footer':用于创建页面底部工具条

我们先来看一下采用jQuery Mobile开发的一个最简单的页面结构是怎样的？

<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile教程-基础篇-页面基本结构</title>
<!-- 设置meta viewport start -->
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<!-- 设置meta viewport end -->

<!-- jqm依赖文件start -->
<link rel="stylesheet" href="../css/jquery.mobile-1.1.0.css" />
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<!-- jqm依赖文件end -->
</head>
<body>
  <!-- 页面容器start -->
  <div data-role="page">

    <!-- 页眉部分start -->
    <div data-role="header">
       <h1>我是header部分</h1>
    </div>
    <!-- 页眉部分end -->

    <!-- content部分start -->
    <div data-role="content">
        <p>jQuery Mobile教程-基础篇-我是content部分</p>
    </div>
    <!-- content部分end -->

    <!-- 页脚部分start -->
    <div data-role="footer">
        <h3>我是footer部分</h3>
    </div>
    <!-- 页脚部分end -->

  </div>
  <!-- 页面容器end -->

</body>
</html>