Question

我正在使用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 */

这些工作，但仅限于页面底部的可扩展列表。为什么它们不适用于所有按钮？

Answer 1

标题背景颜色

我为你做了一个工作的例子：http://jsfiddle.net/Gajotres/5VWuy/

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

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

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

按钮问题

在这种情况下，请勿使用按钮包装标签。带有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>

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

Answer 2

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

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

Answer 3

实际上这是上面的答案是正确的.. 我只是举个例子来告诉你只需在<style>

中创建<head>标记即可像这样

  <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>

Answer 4

上面使用css文件中的.ui-page .ui-header导致在显示新颜色之前首先重新加载原始标题颜色，只需使用https://themeroller.jquerymobile.com/处的主题滚动

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

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

4 个答案:

标题背景颜色

按钮问题