雷林鵬分享：jQuery Mobile CSS 類

　　jQuery Mobile CSS 類

　　jQuery CSS 類

　　jQuery Mobile CSS 類來設置不一樣元素的樣式。

　　如下列表包含了通用的 CSS 樣式：

　　全局類

　　如下類能夠在 jQuery Mobile 小工具中使用 (按鈕，工具條，面板，表格，列表等。):

　　Class描述

　　ui-corner-all爲元素添加圓角

　　ui-shadow爲元素添加陰影

　　ui-overlay-shadow爲元素添加多層陰影

　　ui-mini讓元素變小

　　按鈕類

　　除了全局類外，你能夠向 或元素添加如下類 (不是 按鈕):

 

　　Class描述

　　ui-btn添加在 元素上並以按鈕形式展現

　　ui-btn-inline在同一行上顯示按鈕

　　ui-btn-icon-top定位圖標在按鈕文本之上

　　ui-btn-icon-right定位圖標在按鈕文本的右邊

　　ui-btn-icon-bottom定位圖標在按鈕文本之下

　　ui-btn-icon-left定位圖標在按鈕文本的左邊

　　ui-btn-icon-notext只顯示圖標

　　ui-btn-a|b指定按鈕演示。"a" 是默認的 (灰色背景黑色文本樣式), "b" 修改顏色爲黑色背景白色文本

　　圖標類

　　全部可用圖片的類用在 和

元素上 (查看 jQuery Mobile 圖標參考手冊 瞭解如何在其餘元素上使用):

 

　　Class圖標描述圖標

ui-icon-action動做 (通常用於頁面跳轉切換)

ui-icon-alert三角形內的感嘆號

ui-icon-audio音響/音箱

ui-icon-arrow-d-l左下角箭頭

ui-icon-arrow-d-r右下角箭頭

ui-icon-arrow-u-l左上角箭頭

ui-icon-arrow-u-r右上角箭頭

ui-icon-arrow-l左角箭頭

ui-icon-arrow-r右角箭頭

ui-icon-arrow-u向上箭頭

ui-icon-arrow-d向下箭頭

ui-icon-back返回

ui-icon-bars三條水平線，通常用於展現列表按鈕圖標

ui-icon-bullets用於展現列表按鈕圖標

ui-icon-calendar日曆

ui-icon-camera相機

ui-icon-carat-d向下滑動圖標

ui-icon-carat-l向左滑動圖標

ui-icon-carat-r向右滑動圖標

ui-icon-carat-u向上滑動圖標

ui-icon-check勾選

ui-icon-clock鬧鐘

ui-icon-cloud雲

ui-icon-comment評論 / 消息

ui-icon-delete刪除

ui-icon-edit編輯 / 鉛筆

ui-icon-eye眼睛

ui-icon-forbidden禁用標識 sign

ui-icon-forward撤銷 - (返回上一步)

ui-icon-gear齒輪，通常用於設置按鈕圖標

ui-icon-grid網格

ui-icon-heart心型，可用於文章收藏

ui-icon-home主頁

ui-icon-info信息

ui-icon-location定位

ui-icon-lock鎖

ui-icon-mail郵件 / 信封

ui-icon-minus減號

ui-icon-navigation導航

ui-icon-phone電話

ui-icon-power開關 (On/off)

ui-icon-plus加號

ui-icon-recycle循環 標識

ui-icon-refresh刷新

ui-icon-search搜索 / 放大鏡

ui-icon-shop商店/購物袋

ui-icon-star星號

ui-icon-tag標籤

ui-icon-user用戶 / 人物

ui-icon-video視頻 / 相機

　　主題類 Classes

　　jQuery Mobile 提供了兩個主題類: a (灰) 和 b (黑)。 可是，你能夠建立你本身的自定義類 - 可定義到字母 "z" (查看 jQuery Mobile 主題 )。 下表列出了可用的主題類。 字母 (a-z) 意爲樣式能夠指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。

　　Class描述

　　ui-bar-(a-z)指定欄目演示 - 頭部，底部及其餘欄目

　　ui-body-(a-z)指定內容塊的顏色 - 頁面內容部分 ( 1.4.0 版本已廢棄), 列表視圖， 彈窗, 側欄，面板，加載，摺疊。

　　ui-btn-(a-z)指定按鈕顏色

　　ui-group-theme-(a-z)定義了控制組的演示 listviews 和 collapsible 集合。

　　ui-overlay-(a-z)定義了頁面背景顏色，包括對話框，彈窗和其餘出如今最頂層的頁面容器

　　ui-page-theme-(a-z)定義了頁面演示

　　網格類

　　網格中的列是等寬的(合計是 100%)，沒有邊框、背景、margin 或 padding。 這裏有四種佈局網格可供使用：

　　網格類列列寬對應實例

　　ui-grid-solo1100%ui-block-a嘗試一下

　　ui-grid-a250% / 50%ui-block-a|b嘗試一下

　　ui-grid-b333% / 33% / 33%ui-block-a|b|c 嘗試一下

　　ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|d嘗試一下

　　ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e嘗試一下

　　更多信息能夠查看 jQuery Mobile 網格 章節。

　　本文轉載自：w3cschool

 

　　(編輯：雷林鵬 來源：網絡 侵刪)