如何在 jquery mobile 中自定义标题颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16497788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I customize header color in jquery mobile?
提问by onTheInternet
I am working on a mobile site for a local company using jquery mobile.
我正在使用 jquery mobile 为本地公司开发移动站点。
Here is what I have so far
这是我到目前为止所拥有的
So far, it has turned out well but I'm running into a few problems.
1.
I do not know how to change the header color. I have tried different data-themes. I have tried to use a custom css style sheet. But nothing I do works.
edit - Ok, so apparently the head tag doesn't get a data-role like the other parts of the page. So i removed that. But i still need to figure out how to change the color. The css i write for it seems to get overwritten.
到目前为止，结果很好，但我遇到了一些问题。
1.
我不知道如何更改标题颜色。我尝试了不同的数据主题。我尝试使用自定义 css 样式表。但我所做的一切都不奏效。
编辑 - 好的，显然 head 标签没有像页面的其他部分那样获得数据角色。所以我删除了它。但我仍然需要弄清楚如何改变颜色。我为它编写的 css 似乎被覆盖了。
Here is the actual header
这是实际的标题
<div data-role="header" data-theme="c">
It seems like data roles for headers dont do anything
2.
The call us button has a 'href' tag that lets you dial to a phone. The problem is that ever since i put it in there, it creates a link style around the box that is pretty noticeable.
Here is a screen shot
似乎标题的数据角色不做任何事情
2.
呼叫我们按钮有一个“href”标签，可让您拨打电话。问题是自从我把它放在那里后，它在盒子周围创建了一个非常明显的链接样式。这是一个屏幕截图
How do I stop that style from being made? I have already tried CSS to stop it.
我如何阻止这种风格的产生？我已经尝试过 CSS 来阻止它。
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
These work, but only on the expandable list at the bottom of the page. Why do they not work for all buttons?
这些工作，但只在页面底部的可扩展列表中。为什么它们不适用于所有按钮？
回答by Gajotres
Header background color
标题背景颜色
I made you a working example: http://jsfiddle.net/Gajotres/5VWuy/
我给你做了一个工作示例：http: //jsfiddle.net/Gajotres/5VWuy/
.ui-page .ui-header {
background: #112233 !important;
}
If you want to change it only on a specific page the replace .ui-page with an page id, like this:
如果您只想在特定页面上更改它，请将 .ui-page 替换为页面 ID，如下所示：
#index .ui-header {
background: #112233 !important;
}
Button problem
按键问题
In this case don't wrap your a tag with button. A tag with data-role="button" is button so you can do it like this:
在这种情况下，不要用按钮包裹你的标签。带有 data-role="button" 的标签是按钮，因此您可以这样做：
<a href="tel:8149413000" data-role="button" rel="external" data-theme="c" data-icon="custom-phone" data-iconpos="top">Call Us</a>
You can find this example in my previous jsFiddle.
你可以在我之前的 jsFiddle 中找到这个例子。
回答by gprathour
In jQueryMobile 1.4 they have only two default themes, light and dark. But you can use the same class as mentioned in Gajotres's answer to change the background-color. It still works like a charm.
在 jQueryMobile 1.4 中，它们只有两个默认主题，浅色和深色。但是您可以使用与 Gajotres 的回答中提到的相同的类来更改背景颜色。它仍然像一个魅力。
.ui-page .ui-header {
background: #000000 !important;
}
回答by Quick learner
It is actually like this the above answers are correct ..
i just made an example to show you
just create a <style>tag in <head>
上面的答案实际上是这样的..我只是举了一个例子来展示你只是<style>在<head>
like this
像这样
<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>
then to use this
然后使用这个
<!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>
回答by minimallinux
The above using .ui-page .ui-header in css file causes a reload of the original header color first before displaying the new color, it is far better just to use the theme roller at https://themeroller.jquerymobile.com/
上面在 css 文件中使用 .ui-page .ui-header 会导致在显示新颜色之前重新加载原始标题颜色，最好使用https://themeroller.jquerymobile.com/ 上的主题滚轮
Change your colors in the required classes and download the new css file. This will ensure smooth changes between pages.
在所需的类中更改颜色并下载新的 css 文件。这将确保页面之间的平滑变化。
