# jQuery Mobile 主題 ## jQuery Mobile 主題 jQuery Mobile 提供了5種不同的主題樣式, 從 "a" 到 "e" - 每一種主題的按鈕，工具條，內容塊等等顏色都不一致，每個主題的視覺效果也不一樣。 通過設置元素的data-theme屬性可以自定義應用的外觀: ``` <div data-role="page" data-theme="a|b|c|d|e"> ``` | 值 | 描述 | 實例 | | --- | --- | --- | | a | 默認。黑色背景白色文字 | | b | 藍色背景白色文字/ 黑色文字灰色背景 | | c | 黑色文字淺灰色背景 | | d | 黑色為主白色背景 | | e | 黑色文字橙色背景 | >  > **你喜歡混合主題！** > 默認情況下， jQuery Mobile 使用 "a" 主題 (黑色) 來設置頭部和底部 ， "c" 主題 (淺灰色) 設置頁面內容。 但是，你可以自定義設置你喜歡的混合主題。 ## 主題頭部，內容和底部 ## 實例 ``` <div data-role="header" data-theme="b"></div> <div data-role="content" data-theme="a"></div> <div data-role="footer" data-theme="e"></div> ``` ## 主題對話框 ## 實例 ``` <a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a> <div data-role="page" id="pagetwo" data-overlay-theme="e"> ? <div data-role="header" data-theme="b"></div> ? <div data-role="content" data-theme="a"></div> ? <div data-role="footer" data-theme="c"></div> </div> ``` ## 主題按鈕 ## 實例 ``` <a href="#" data-role="button" data-theme="a">Button</a> <a href="#" data-role="button" data-theme="b">Button</a> <a href="#" data-role="button" data-theme="c">Button</a> ``` ## 主題圖標 ## 實例 ``` <a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a> ``` ## 頭部和底部的主題按鈕 ## 實例 ``` <div data-role="header"> ? <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a> ? <h1>Welcome To My Homepage</h1> ? <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a> </div> <div data-role="footer"> ? <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a> ? <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a> ? <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a> </div> ``` ## 主題導航條 ## 實例 ``` <div data-role="footer" data-theme="e"> ? <h1>Insert Footer Text Here</h1> ? <div data-role="navbar"> ??? <ul> ????? <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li> ????? <li><a href="#" data-icon="arrow-r">Button 2</a></li> ????? <li><a href="#" data-icon="arrow-r">Button 3</a></li> ????? <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li> ??? </ul> ? </div> </div> ``` ## 主題可折疊按鈕和內容 ## 實例 ``` <div data-role="collapsible" data-theme="b" data-content-theme="e"> ? <h1>Click me - I'm collapsible!</h1> ? <p>I'm the expanded content.</p> </div> ``` ## 主題列表 ## 實例 ``` <ul data-role="listview" data-theme="e"> ? <li><a href="#">List Item</a></li> ? <li data-theme="a"><a href="#">List Item</a></li> ? <li data-theme="b"><a href="#">List Item</a></li> ? <li><a href="#">List Item</a></li> </ul> ``` ## 主題分割按鈕 ## 實例 ``` <ul data-role="listview" data-split-theme="e"> ``` ## 主題可折疊列表 ## 實例 ``` <div data-role="collapsible" data-theme="b" data-content-theme="e"> ? <ul data-role="listview"> ??? <li><a href="#">Agnes</a></li> ? </ul> </div> ``` ## 主題表單 ## 實例 ``` <label for="name">Full Name:</label> <input type="text" name="text" id="name" data-theme="a"> <label for="colors">Choose Favorite Color:</label> <select id="colors" name="colors" data-theme="b"> ? <option value="red">Red</option> ? <option value="green">Green</option> ? <option value="blue">Blue</option> </select> ``` ## 主題可折疊表單 ## 實例 ``` <fieldset data-role="collapsible" data-theme="b" data-content-theme="e"> <legend>Click me - I'm collapsible!</legend> ``` ## 添加新主題 jQuery Mobile 可以在移動頁面添加新主題。 通過修改 CSS 文件來添加或編輯新主題(如果你已經下載了 jQuery Mobile)。你只需要拷貝樣式模塊，然后重命令字母類名（f-z）,并在樣式中添加你喜歡的顏色和字體。 你也可以在 HTML 文檔中添加主題的新樣式 - 工具條添加類： ui-bar-(a-z) ，文本內容添加類: ui-body-(a-z) for the content: ## 實例 ``` <style> .ui-bar-f { color:green; background-color:yellow; } .ui-body-f { font-weight:bold; color:purple; } </style> ```