2020年11月10日 星期二

jQuery Mobile 學習筆記 (十一) : 主題佈景

今天繼續測試 jQuery Mobile 的主題佈景. 此系列之前的測試文章參考 :

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 都是相同的線條樣式主題, 結果如下 :






注意, 套用預設主題 c~z 都會得到與主題 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" 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 來自訂主題佈景 (主要是用來設定頁面中各元件的背景色與邊框樣式), 其網址為 :

https://themeroller.jquerymobile.com/

進入網站後出現如下視窗 :




按 "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/custom-theme-c.min.css" /> 
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

將這兩行添加到專案網頁中, 如下面範例所示 : 



<!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 製作的表單元件範例 : 



<!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 中再調整 : 


沒有留言 :