jQuery Mobile 主题

在 jQuery Mobile 中，主题（Theme）是一种用于定义应用程序外观的方式。主题包括背景颜色、文本颜色、按钮样式等，可以通过简单的类名设置。以下是一个简单的示例，演示了如何在 jQuery Mobile 中使用主题：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile 主题示例</title>
  <!-- 引入 jQuery Mobile CSS 文件 -->
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- 引入 jQuery 文件 -->
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <!-- 引入 jQuery Mobile 文件 -->
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <div data-role="page" data-theme="a">

    <div data-role="header">
      <h1>主题示例</h1>
    </div>

    <div data-role="content">
      <p>这是一个使用 jQuery Mobile 主题的示例。</p>
      <a href="#" class="ui-btn ui-btn-b">按钮</a>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
      <h4>© 2023 jQuery Mobile 示例</h4>
    </div>

  </div>

</body>
</html>

在这个示例中，data-theme 属性用于设置整个页面的主题。每个页面的主题可以独立设置。此外，按钮使用了 ui-btn 类，而 ui-btn-b 类表示按钮使用主题 B 的样式。你可以根据需要使用不同的主题和类名来调整页面元素的样式。

主题的设置可以使你的应用程序在不同的设备上获得一致的外观，同时也为用户提供了可自定义的主题选项。确保引入了正确版本的 jQuery 和 jQuery Mobile，以确保主题样式的正确应用。

转载请注明出处：http://www.pingtaimeng.com/article/detail/9432/jQuery Mobile