jQuery Mobile（一）—入门

jQuery Mobile简介

jQuery Mobile 是一个用于创建移动端web应用的的前端框架。

通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。

jQuery Mobile主要特性

概括起来，jQuery Mobile有以下特性：

基于jQuery构建
兼容绝大多数手机平台
轻量级的库
模块化结构
HTML5标记驱动的配置
渐进增强原则
响应设计
强大的Ajax的导航系统
易用性
支持触摸和鼠标事件
统一的UI组件
强大的主题化框架

jQuery Mobile使用

1.构建HTML模版

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile</title>
    <!-- 设置宽度为设备的最大宽度，禁止用户放大和缩小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>欢迎来到我的主页</h1>
    </div>

    <div data-role="content">
        <p>我现在是一个移动端开发者!!</p>
    </div>

    <div data-role="footer">
        <h1>底部文本</h1>
    </div>
</div>
</body>
</html>

2.data-role 属性

在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。