【jquery mobile筆記三】設定jqm的背景色(header,content,footer)
<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個控制元件分組的樣式。非常好用！！！