如何添加自定义数据主题样本而不覆盖默认样本?

时间:2013-07-08 18:10:05

标签: jquery-mobile

使用Themeroller我可以使用我自己的颜色主题而不是默认颜色主题。但我想添加几个数据主题样本(例如“f”和“g”)并将它们与默认样本一起使用。我能用Themeroller吗?

3 个答案:

答案 0 :(得分:1)

如果你看jquery mobile's css file,就会看到这样的结构:

/* 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" (或者你想要命名的任何内容)在/* Structure */之前,或者在之后引用 jQM' sss的单独的CSS文件中。这不会影响以前的样式。但请务必以这种方式命名元素:

.ui-bar-themename

否则,你将超越现有的风格。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

jquery-mobile.js文件执行的所有jquery移动主题。在.js文件中只定义了5个主题。 A和B和C以及D和E. 如果要将自定义主题(例如“F”)添加到此组主题中,则应将此主题ID添加到jquery-mobile.js中以便执行。你不自然吗? 在简单的情况下,您可以通过例如“A”或“B”主题参数来制作您的自定义主题。