jQuery Mobile 实例学习笔记

简介

jQuery Mobile 是一个基于 jQuery 的移动应用程序框架，旨在提供易于使用的 HTML5 标记和 CSS 样式，以构建跨平台的移动应用程序。它具有可定制的主题和插件，可根据需要进行扩展。

实例

下面是一些示例，演示了如何使用 jQuery Mobile 构建移动应用程序：

1. 页面基础结构

jQuery Mobile 的页面基础结构由多个 HTML 元素组成，包括页面本身 data-role="page"、页眉 data-role="header"、页脚 data-role="footer" 和内容区域 data-role="content"。以下是一个简单的页面基础结构示例：

markdownCopy Code
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://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>欢迎使用 jQuery Mobile</h1>
      </div>
      <div data-role="content">
        <p>这是一个简单的页面</p>
      </div>
      <div data-role="footer">
        <h4>版权所有 &copy; 2023</h4>
      </div>
    </div>
  </body>
</html>

2. 按钮

jQuery Mobile 提供了多种样式的按钮，通过添加 data-role="button" 属性来创建按钮。以下是一些示例：

标准按钮：<a href="#" data-role="button">标准按钮</a>
图标按钮：<a href="#" data-role="button" data-icon="star">图标按钮</a>
左侧图标按钮：<a href="#" data-role="button" data-icon="home" data-iconpos="left">左侧图标按钮</a>
按钮组：<div data-role="controlgroup"><a href="#" data-role="button">按钮1</a><a href="#" data-role="button">按钮2</a></div>

3. 导航栏

jQuery Mobile 的导航栏通常作为页眉使用，可用于创建页面之间的链接。以下是一些示例：

单个按钮导航栏：<div data-role="navbar"><ul><li><a href="#">按钮1</a></li><li><a href="#">按钮2</a></li></ul></div>
分割按钮导航栏：<div data-role="navbar"><ul><li><a href="#">按钮1</a></li><li><a href="#">按钮2</a></li><li><a href="#" data-role="button" data-icon="gear" data-iconpos="notext"></a></li></ul></div>
选项卡导航栏：<div data-role="tabs"><div data-role="navbar"><ul><li><a href="#tab1">选项卡1</a></li><li><a href="#tab2">选项卡2</a></li></ul></div><div id="tab1"><p>这是选项卡1的内容</p></div><div id="tab2"><p>这是选项卡2的内容</p></div></div>

4. 列表

jQuery Mobile 提供了多种类型的列表，如普通列表、分隔符列表和折叠列表。以下是一些示例：

普通列表：<ul data-role="listview"><li><a href="#">列表项1</a></li><li><a href="#">列表项2</a></li></ul>
分隔符列表：<ul data-role="listview"><li><a href="#">列表项1</a></li><li data-role="list-divider">分隔符</li><li><a href="#">列表项2</a></li></ul>
折叠列表：<div data-role="collapsible"><h3>标题</h3><p>内容</p></div>

结论

jQuery Mobile 是一个功能丰富的移动应用程序框架，具有可定制的主题和插件，可轻松构建跨平台的移动应用程序。上述示例只是 jQuery Mobile 的冰山一角，欢迎您探索更多功能和用法。