6

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

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

4

4 回答 4

12

标题背景颜色

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

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

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

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

按钮问题

在这种情况下，不要用按钮包装你的标签。带有 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 中找到这个例子。

于 2013-05-11T15:57:22.770 回答
0

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.

.ui-page .ui-header {
    background: #000000 !important;
}
于 2014-06-25T16:32:54.657 回答
0

实际上就是这样，上面的答案是正确的..我只是做了一个例子来展示你只是<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>
于 2015-05-19T06:29:27.407 回答
0

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

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

于 2017-09-07T13:28:57.463 回答