jQuery的CSS類
jQuery Mobile的使用CSS類風格迥異的元素。
對於下面的參考名單,我們已經包括了常見的樣式的CSS類。
全局類
這些類可以在任何的jQuery移動小窗口(被添加buttons, toolbars, panels, tables, lists ,等等。):
類 | 描述 |
---|---|
ui-corner-all | 添加圓角元素 |
ui-shadow | 添加陰影元素 |
ui-overlay-shadow | 將疊加層陰影的元素 |
ui-mini | 使元素小 |
按鈕類
除了全局類,你可以添加以下類<a>或<button>元素(而不是<input>鍵):
類 | 描述 |
---|---|
ui-btn | 必須添加到<a>的元素,如果你希望它們作為樣式按鈕 |
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"將顏色改為黑色背景,白色的文字 |
圖標類
所有可用圖標類<a>和<button>元素(參見圖標參考有關如何使用上的其他元素的圖標):
類 | 圖標說明 | 圖標 |
---|---|---|
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 | 禁止符號 | |
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 | 功率(開/關) | |
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 | 錄影機 |
主題類
jQuery的移動提供了兩個主題類:一(灰色)和b(黑色)。 達信一路-然而,你也可以創建自己的自定義類值"z"見主題章節)。 下表列出了可用的主題類。 字母(az)意味著你可以指定從A到Z的信。 例如: ui-bar-a或ui-bar-b等。
類 | 描述 |
---|---|
ui-bar-(a-z) | 指定一個欄的顏色 - 頁眉,頁腳和其他的酒吧 |
ui-body-(a-z) | 指定內容塊的顏色 - 網頁內容窗格(在1.4.0版本不建議使用),列表視圖項,彈出窗口,collapsibles,裝載機,滑塊和面板 |
ui-btn-(a-z) | 指定的按鈕(和圖標)的顏色 |
ui-group-theme-(a-z) | 指定controlgroups,列表視圖和可折疊套的顏色 |
ui-overlay-(a-z) | 指定對話框,彈出和其他頁面的容器出現在頂部的頁面背景顏色 |
ui-page-theme-(a-z) | 指定頁面的顏色 |
網格類
在網格中列的寬度相等(在總數的100%寬)的,沒有邊框,背景,保證金或填充。 存在可以使用的五種佈局格:
電網類 | 列 | 列寬 | 對應於 | 例 |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-block-a | Try it |
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
有關網格的更多信息,請閱讀我們的jQuery Mobile的網格章 。