0

使用 Themeroller，我可以使用自己的颜色主题来代替默认主题。但我想添加几个数据主题样本（例如“f”和“g”）并将它们与默认样本一起使用。我可以用 Themeroller 来做吗？

4

3 回答 3

1

如果您查看jquery mobile 的 css 文件，您会看到如下结构：

/* Swatches */
/* A ---------------------------------------------*/

.ui-bar-a {
    border: 1px solid       #333 /*{a-bar-border}*/;
    background:             #111 /*{a-bar-background-color}*/;
    color:                  #fff /*{a-bar-color}*/;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #000 /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
}
.ui-bar-a,
.ui-bar-a input,
.ui-bar-a select,
.ui-bar-a textarea,
.ui-bar-a button {
    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-bar-a .ui-link-inherit {
    color: #fff /*{a-bar-color}*/;
}
.ui-bar-a a.ui-link {
    color: #7cc4e7 /*{a-bar-link-color}*/;
    font-weight: bold;
}
...
/* B -----------------------------------------*/
...
/* C -----------------------------------------*/
...
/* D -----------------------------------------*/
...
/* E -----------------------------------------*/
...

/* Structure */
/* links within "buttons" -----------------------*/

您可以在 之前添加主题“f”（或任何您想命名的名称） ，或在jQM 的 css之后/* Structure */引用的单独 CSS 文件中。这不会影响以前的样式。但一定要以这种方式命名元素：

.ui-bar-themename

否则，您将超越现有样式。

于 2013-07-08T18:17:38.900 回答
1

在 Themeroller 中，我为字母 F 和 G 添加了额外的样式，并根据需要对它们进行了调整（A - E 保持不变）。然后我下载了带有样式的 zip 文件，复制了/* F和/* G部分（感谢@hungerpain），将它们放在单独的 .css 中，并将其链接到 jQM .css 之后。

于 2013-07-09T15:16:26.533 回答
0

由 jquery-mobile.js 文件执行的所有 jquery 移动主题。在 .js 文件中只定义了 5 个主题。A 和 B 和 C 和 D 和 E。如果您想将自定义主题（例如“F”）添加到此组主题中，则应将此主题 id 添加到 jquery-mobile.js 中以执行。你明白吗？在简单的情况下，您可以通过输入例如“A”或“B”主题参数来制作自定义主题。

于 2016-03-19T19:21:40.167 回答