如何在 jquery mobile 中自定义标题颜色？答案

【问题标题】：how do I customize header color in jquery mobile?如何在 jquery mobile 中自定义标题颜色？
【发布时间】：2013-05-06 01:18:47
【问题描述】：

我正在使用 jquery mobile 为一家本地公司开发移动网站。

这是我目前所拥有的

到目前为止，结果很好，但我遇到了一些问题。

1.
我不知道如何更改标题颜色。我尝试过不同的数据主题。我尝试使用自定义 CSS 样式表。但我所做的一切都不起作用。

编辑 - 好的，显然 head 标签没有像页面的其他部分那样获得数据角色。所以我删除了那个。但我仍然需要弄清楚如何改变颜色。我为它编写的 CSS 似乎被覆盖了。

这是实际的标题

<div data-role="header" data-theme="c">

标题的数据角色似乎没有任何作用

2.
呼叫我们按钮有一个“href”标签，可让您拨打电话。问题是自从我把它放在那里后，它在盒子周围创建了一个非常明显的链接样式。这是屏幕截图

如何阻止这种风格的产生？我已经尝试过 CSS 来阻止它。

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */

这些有效，但仅在页面底部的可展开列表中。为什么它们不适用于所有按钮？

【问题讨论】：

3 个选项：1. 编辑当前 CSS 主题； 2 使用浏览器开发工具检查正在设置的属性并覆盖它们； 3 向该 div 添加一个类并应用您自己的 CSS；
这是一个评论，而不是一个答案，拜托。长大！
@onTheInternet 根本不是正确的态度，而来自 balexandre 的评论可能看起来“显而易见”——对某些人来说并非如此，而且由于您在为 jquery mobile 设置主题时遇到困难，因此检查明显是值得的。

标签： jquery html css jquery-mobile jquery-mobile-button

【解决方案1】：

上述在css文件中使用.ui-page .ui-header会导致在显示新颜色之前先重新加载原始标题颜色，最好在https://themeroller.jquerymobile.com/使用主题滚轮

在所需的类中更改颜色并下载新的 css 文件。这将确保页面之间的平滑更改。

【讨论】：

【解决方案2】：

其实就是这样上面的答案是正确的.. 我只是做了一个例子给你看只需在<head> 中创建一个<style> 标签

喜欢这个

  <head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
    background: #5069A0;
}
</style>
</head>

然后使用这个

<!DOCTYPE html>
<html>
<head>
  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <!-- Include the jQuery library -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
    background: #5069A0;
}
</style>
</head>
<body>


<div data-role="page" id="pageone">
  <div data-role="header" class="ui-bar ui-bar-b">
  <h1><span style="color:white;">facebook</span></h1>
  </div>

  <div data-role="main" class="ui-content">
  <p>Welcome!</p>
  </div>

  <div data-role="footer">
  <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

【讨论】：

【解决方案3】：

在 jQueryMobile 1.4 中，它们只有两个默认主题，浅色和深色。但是您可以使用与 Gajotres 的答案中提到的相同的类来更改背景颜色。它仍然像一个魅力。

.ui-page .ui-header {
    background: #000000 !important;
}

【讨论】：

【解决方案4】：

标题背景颜色

我给你做了一个有效的例子：http://jsfiddle.net/Gajotres/5VWuy/

.ui-page .ui-header {
    background: #112233 !important;
}

如果您只想在特定页面上更改它，请将 .ui-page 替换为页面 id，如下所示：

#index .ui-header {
    background: #112233 !important;
}

按钮问题

在这种情况下，不要用按钮包裹你的 a 标签。带有 data-role="button" 的标签是 button 所以你可以这样做：

<a href="tel:8149413000" data-role="button" rel="external" data-theme="c" data-icon="custom-phone" data-iconpos="top">Call Us</a>

你可以在我之前的 jsFiddle 中找到这个例子。

【讨论】：

我意识到 Jquery mobile 有一个我可以使用的主题滚轮。虽然这个答案非常有帮助，但我已经解决了这个问题。不过会赞成这个。谢谢。