【jquery mobile笔记三】设置jqm的背景色(header,content,footer)

<div class="ui-bar-b" data-role="header">
<h1>收银台</h1>

       </div>

给header或者footer这样的bar条设置为蓝色背景，其中class="ui-bar-b"是jqm自带的，一共有ui-bar-a(黑色)，ui-bar-b(蓝色)，ui-bar-c(比较浅的灰白)，ui-bar-d(比较深的灰白),ui-bar-e(黄色)5中自带的颜色。

给需要设置背景的div里加上相应的class="ui-bar-b"即可。

如果想自定义颜色，可以在页面上自己写一个例如：

.ui-bar-x { 
   border: 1px solid #FFF;
   background:#006600; 
   color:#FFF; 
   font-weight: bold; 
   text-shadow: 0 -1px 1px #000000; 
};

然后再class里设置class="ui-bar-x" 即可。

如果给除了bar条以外的页面主背景设置颜色可以如下设置

.ui-page { 
/**background:#D3D3D3;**/
}

通过.ui-page来定义样式即可。

此外，还可以通过jqm的官网的在线css设置器来设置需要的样式，然后下载下来，引入页面使用即可。网址为http://jquerymobile.com/themeroller/。里面有ABC3个分组，可以为每个分组都设置需要的样式。注意页面上部jquery mobile Version的字样，这里可以选择需要的版本，然后在下面drag a color...这里可以直接拖拽一个颜色到ABC3个分组的控件上。在左边有微调颜色字体阴影等的设置。拖拽颜色的下方有lightness和saturation2个滑杆可以设置上面拖拽的颜色。设置好后点击上方download the theme zip file就可以下载css文件，引入到页面以后，ui-bar-a,ui-bar-b,ui-bar-c就分别对应在设置器里的ABC3个控件分组的样式。非常好用！！！