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

发布时间:2014-10-23 23:23:40
来源:分享查询网

<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个控件分组的样式。非常好用!!!

返回顶部
查看电脑版