jQuery Mobile Toolbar主题选项

jQuery Mobile是一种基于网络的技术，用于制作可在所有智能手机、平板电脑和台式机上访问的响应式内容。

在这篇文章中，我们将使用jQuery Mobile Toolbar theme 选项。Toolbar theme选项是用来设置工具栏的颜色方案。它接受一个单一的字母（a-z），映射到主题中的一个色块。

语法:

$(".selector").toolbar({
   theme: "b"
});

CDN链接：首先，添加你的项目需要的jQuery Mobile脚本。

<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-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

示例 1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
  
    <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-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
  
    <script>
      function changeTheme() {
        $("#divID").toolbar("option", "theme", "b");
      }
    </script>
  </head>
  <body>
    <div data-role="page">
      <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <h3>jQuery Mobile Toolbar theme option</h3>
  
        <div id="divID" data-role="header">
          <h1>Toolbar</h1>
        </div>
  
        <button style="width:250px; margin:30px 0" 
                onclick="changeTheme();">
          Change Theme to swatch b
        </button>
      </center>
    </div>
  </body>
</html>

输出:

jQuery Mobile Toolbar主题选项

例子2：现在让我们创建一个新的色块，映射到字母 “c”，并使用theme选项来改变工具栏的主题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <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-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
    <style>
      /* Custom swatch "c" just for toolbar */
      .ui-bar-c{
          background-color: #009245; /* toolbar background color*/
          border-color: #dddddd; /* toolbar border color*/
          color: #ffffff; /* toolbar text color*/    
        }      
    </style>
  
    <script>
        function changeTheme() {
          $("#divID").toolbar("option", "theme", "c");
        }
    </script>    
  </head>
  <body>
    <div data-role="page">
      <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <h3>jQuery Mobile Toolbar theme option</h3>
  
        <div id="divID" data-role="header">
          <h1>Toolbar</h1>
        </div>
  
        <button style="width:250px; margin:30px 0"
                onclick="changeTheme();">
             Change Theme to swatch c
        </button>
      </center>
    </div>
  </body>
</html>

输出:

jQuery Mobile Toolbar主题选项