使用Themeroler,我可以使用自己的颜色主题,而不是默认的颜色主题。但我想添加几个数据主题样例(例如"f"one_answers"g"),并将它们与默认样例一起使用。我能用Themeroler吗?
如果你查看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" -----------------------*/
您可以在/* Structure */
之前添加主题"f"(或任何您想命名的名称),也可以在jQM的CSS之后添加一个单独的CSS文件。这不会影响以前的样式。但一定要这样命名元素:
.ui-bar-themename
否则,您将超越现有的样式。
在Themeroler中,我为字母F和G添加了额外的样式,并根据需要对它们进行了调整(A-E保持不变)。然后,我下载了带有样式的zip文件,复制了/* F
和/* G
部分(感谢@hungerpain),将它们放在一个单独的.css中,并在jQM.css.