# jQuery Mobile 學習筆記 (三) : 工具列
# jQuery Mobile 學習筆記 (四) : 對話框 # jQuery Mobile 學習筆記 (十) : 表單元件 (下)
1. 預設主題佈景 :
舊版的 jQuery Mobile (v1.3.2 以前) 內建 a, b, c, d, e 五種主題佈景, 但新版 (v1.4.5) 卻僅提供了淡色系的主題 a 與暗色系的主題 b 兩種主要的布景, 其餘 c~z 共 24 種都是完全相同的預設線條主題模板, 可使用 jQuery Mobile 所提供的 ThemeRoller 線上編輯工具修改為自訂主題, 參考 :
jQuery Mobile 的主題佈景使用 data-theme 屬性, 在頁面元件 (即 data-role="page" 的 div 或 section 元素) 上套用 data-theme 屬性會使該頁面內之所有元件都套用該主題之樣式, 若不指定 data-theme 屬性則預設為淡色系的 a 主題. 頁面內的任何元素也可單獨套用 data-theme 屬性, 亦即可在 a 主題頁面內之按鈕等元件套用使用 b 主題.
下面為新版 v1.4.5 a, b, c 三種主題佈景的範例 :
測試 1 : 新版 v1.4.5 的 a, b, c 兩種預設主題佈景 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 測試</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>預設主題佈景 a</h1>
</header>
<article data-role="content">
<a href="#page2" data-role="button">主題佈景 b</a>
<a href="#page3" data-role="button">主題佈景 c</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2" data-theme="b">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>主題背景 b</h1>
</header>
<article data-role="content">
<a href="#page1" data-role="button">主題佈景 a</a>
<a href="#page3" data-role="button">主題佈景 c</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第三頁頁面 -->
<section data-role="page" id="page3" data-theme="c">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>主題背景 c</h1>
</header>
<article data-role="content">
<a href="#page1" data-role="button">主題佈景 a</a>
<a href="#page2" data-role="button">主題佈景 b</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
</script>
</body>
</html>
此例共有三個頁面 page1~3, 分別展示主題佈景 a, b, c (線條樣式) 的視覺效果, 每個頁面中有超連結按鈕切換到其它主題佈景頁面, 其中第一頁沒有使用 data-theme 屬性指定主題佈景, 預設就是主題 a. 主題 c~z 都是相同的線條樣式主題, 結果如下 :
頁面內的所有元件可以指定與頁面主題不同之布景 (通常是為了凸顯某元件之特殊性或重要性), 否則就是套用頁面本身之布景, 例如 :
測試 2 : 頁面內的元件套用與頁面不同之主題佈景 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 測試</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>預設主題佈景 a</h1>
</header>
<article data-role="content">
<a href="#page2" data-role="button" data-theme="b">主題佈景 b</a>
<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="https://shopping.pchome.com.tw/">PChome 購物</a></li>
<li><a href="https://tw.buy.yahoo.com/">Yahoo 購物</a></li>
<li><a href="https://www.momoshop.com.tw/">momo 購物</a></li>
</ul>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2" data-theme="b">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>主題背景 b</h1>
</header>
<article data-role="content">
<a href="#page1" data-role="button" data-theme="a">主題佈景 a</a>
<div data-role="fieldcontain">
<label for="temp">溫度</label>
<input type="range" id="temp" name="temp" min="0" max="50" step="1" data-highlight="true" data-theme="a">
</div>
<div data-role="fieldcontain">
<label for="auto_update">自動更新:</label>
<select id="auto_update" name="auto_update" data-role="slider" data-theme="a">
<option value="是" selected>是</option>
<option value="否">否</option>
</select>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
</script>
</body>
</html>
此例有兩個頁面第一個頁面使用預設主題 a, 但其內部元件使用主題 b; 第二個頁面指定使用主題 b, 但其內部元件使用主題 a, 結果如下 :
此例網址 QR code 為 :
2. 用 ThemeRoller 自訂主題佈景 :
如果要讓自己的行動網頁有獨特的主題佈景, 可利用 jQuery Mobile 提供的線上工具 ThemeRoller 來自訂主題佈景 (主要是用來設定頁面中各元件的背景色與邊框樣式), 其網址為 :
按 "Get Roolling" 進入自訂布景頁面 :
此 ThemeRoller 設定網頁分成三部分 :
- 樣式檢視器 (inspector) : 左方
- 顏色選擇器 (color) : 上方
- 效果預覽區 (preview) : 下方
左方樣式檢視器 (inspector) 用來檢視各個主題佈景的樣式設定值 (也可以手動調整), 按 + 鈕可新增 c~z 的自訂主題佈景 :
上方顏色選擇器可左右拉動 Lightness 與 Saturation 滑桿調整候選色塊之亮度與飽和度, 然後將選定之色塊往下拉曳到下方的主題佈景預覽區的元件上 :
也可以點按右上方的 "Colors..." 超連結手動輸入色碼, 結果會填入 "Recent Colors" 的自訂色塊中, 一樣可直接拉曳到下方預覽區的任何元件中 :
自訂布景的第一步是按網頁最上面的 "Import" 匯入預設主題佈景 (a, b) :
匯入後顯示有 a, b 兩個預設主題背景, 按檢視區左上方頁籤 A, B 後面的 "+" 新增一個新的主題佈景 C (也可以在預覽區右下方按 "Add swatch" 新增) :
我參考前幾天的 jQuery 表格控制測試中的表格配色設定了主題 c 樣式如下, 參考 :
主要是調整了下列設定表中的背景色, 邊框色, 或文字顏色 :
- Header/Footer Bar : 文字色改為 #ffffff, 背景色改為 #4bacff, 邊框色改為 #295e8c
- Body : 背景色改為 #eaf5ff, 邊框色改為 #0058a3
- Button Normal : 背景色改為 #eaf5ff, 邊框色改為 #0058a3
- Button Hover : 背景色改為 #c4e4ff, 邊框色改為 #0058a3
其餘設定表則照預設沒有變更.
設定好後按網頁最上方的 "Download theme zip file" 鈕, 在彈出視窗右上角輸入主題佈景名稱 (此處取名 custom-theme-c), 然後按右下角的 "Download ZIP" 鈕下載布景設定壓縮檔 :
其中高亮度的部分是使用此主題 c 佈景之網頁需要添加的樣式連結. 解開壓縮檔含有一個網頁檔 index.html 以及一個子目錄 themes, 將此 themes 複製到專案目錄下, 開啟 index.html 裡面即有與上面相同的網頁樣式設定 :
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
下面是使用此自訂的主題 c 製作的表單元件範例 :
將這兩行添加到專案網頁中, 如下面範例所示 :
測試 3 : 自訂主題佈景 c (藍色系)-1 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 測試</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<link rel="stylesheet" href="themes/custom-theme-c.min.css">
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>預設主題佈景 a</h1>
</header>
<article data-role="content">
<a href="#page2" data-role="button">主題佈景 b</a>
<a href="#page3" data-role="button">主題佈景 c</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第二頁頁面 -->
<section data-role="page" id="page2" data-theme="b">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>主題背景 b</h1>
</header>
<article data-role="content">
<a href="#page1" data-role="button">主題佈景 a</a>
<a href="#page3" data-role="button">主題佈景 c</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<!-- 第三頁頁面 -->
<section data-role="page" id="page3" data-theme="c">
<header data-role="header" data-add-back-btn="true" data-back-btn-text="返回">
<h1>主題背景 c</h1>
</header>
<article data-role="content">
<a href="#page1" data-role="button">主題佈景 a</a>
<a href="#page2" data-role="button">主題佈景 b</a>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
</script>
</body>
</html>
此例先將兩個自訂主題 c 布景的 css 檔位址放在 header 中, 然後指定頁面 page3 使用此自訂之主題 c 布景, 結果如下 :
此例網址 QR code 為 :
下面是使用此自訂的主題 c 製作的表單元件範例 :
測試 4 : 自訂主題佈景 c (藍色系)-2 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 測試</title>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<link rel="stylesheet" href="themes/custom-theme-c.min.css">
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1" data-theme="c">
<header data-role="header">
<h1>自訂主題佈景 c 測試</h1>
</header>
<article data-role="content">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>學歷:</legend>
<div data-role="fieldcontain">
<label for="ed-1">國中</label>
<input type="radio" name="education" id="ed-1" value="國中">
<label for="ed-2">高中</label>
<input type="radio" name="education" id="ed-2" value="高中">
<label for="ed-3">大學</label>
<input type="radio" name="education" id="ed-3" value="大學" checked>
<label for="ed-4">研究所</label>
<input type="radio" name="education" id="ed-4" value="研究所">
</div>
</fieldset>
<div data-role="fieldcontain">
<label for="graduated">畢業</label>
<select id="graduated" name="graduated" data-role="slider">
<option value="是" selected>是</option>
<option value="否">否</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="work_experience">工作經驗</label>
<input type="range" id="work_experience" name="work_experience" min="0" max="30" step="1" data-highlight="true">
</div>
<div data-role="fieldcontain">
<label for="language">擅長的程式語言</label>
<select id="language" name="language" data-native-menu="false" multiple>
<option value="Python" selected>Python</option>
<option value="Javascript">Javascript</option>
<option value="R 語言">R 語言</option>
<option value="Swift">Swift</option>
<option value="C 語言">C 語言</option>
</select>
</div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
<script>
</script>
</body>
</html>
此範例放置了單選選項控制群組, 切換開關, 滑桿數值輸入, 以及多選下拉式選單, 指定使用自訂主題佈景 c, 效果如下 :
此例網址 QR code 為 :
這個自訂的主題 c 布景壓縮檔我已上傳 GitHub 保存, 可 import 到 ThemeRoller 中再調整 :
1 則留言 :
感謝教學~
張貼留言