免費(fèi)AI編程助手
jQuery Mobile 主題
2018-02-03 15:21 更新
jQuery Mobile 主題
jQuery Mobile提供了豐富的主題界面，可以呈現(xiàn)出好看的UI效果。
jQuery Mobile 主題
jQuery Mobile 提供了5種不同的主題樣式, 從 "a" 到 "e" - 每一種主題的按鈕，工具條，內(nèi)容塊等等顏色都不一致，每個(gè)主題的視覺效果也不一樣。
通過設(shè)置元素的data-theme屬性可以自定義應(yīng)用的外觀:
<div data-role="page" data-theme="a|b|c|d|e">
| 值 | 描述 | 實(shí)例 |
|---|---|---|
| a | 默認(rèn)。黑色背景白色文字 | 嘗試一下 |
| b | 藍(lán)色背景白色文字/ 黑色文字灰色背景 | 嘗試一下 |
| c | 黑色文字淺灰色背景 | 嘗試一下 |
| d | 黑色為主白色背景 | 嘗試一下 |
| e | 黑色文字橙色背景 | 嘗試一下 |
 | 你喜歡混合主題！ 默認(rèn)情況下， jQuery Mobile 使用 "a" 主題 (黑色) 來設(shè)置頭部和底部 ， "c" 主題 (淺灰色) 設(shè)置頁面內(nèi)容。 但是，你可以自定義設(shè)置你喜歡的混合主題。 |
|---|
主題頭部，內(nèi)容和底部
實(shí)例
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
嘗試一下 ?
主題對(duì)話框
實(shí)例
<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>
<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>
嘗試一下 ?
主題按鈕
實(shí)例
<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-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>
嘗試一下 ?
提示：在jQuery Mobile中包含了一套標(biāo)準(zhǔn)的jQuery Mobile圖標(biāo)，可以分配給按鈕。
主題圖標(biāo)
頭部和底部的主題按鈕
實(shí)例
<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>
<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>
嘗試一下 ?
主題導(dǎo)航條
實(shí)例
<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>
<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>
嘗試一下 ?
主題可折疊按鈕和內(nèi)容
實(shí)例
<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>
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
嘗試一下 ?
主題列表
實(shí)例
<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>
<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>
嘗試一下 ?
主題分割按鈕
主題可折疊列表
實(shí)例
<div data-role="collapsible" data-theme="b" data-content-theme="e">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
嘗試一下 ?
主題表單
實(shí)例
<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>
<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>
嘗試一下 ?
主題可折疊表單
實(shí)例
<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>
<legend>Click me - I'm collapsible!</legend>
嘗試一下 ?
添加新主題
jQuery Mobile 可以在移動(dòng)頁面添加新主題。
通過修改 CSS 文件來添加或編輯新主題(如果你已經(jīng)下載了 jQuery Mobile)。你只需要拷貝樣式模塊，然后重命令字母類名（f-z）,并在樣式中添加你喜歡的顏色和字體。
你也可以在 HTML 文檔中添加主題的新樣式 - 工具條添加類： ui-bar-(a-z) ，文本內(nèi)容添加類: ui-body-(a-z) for the content:
實(shí)例
<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
嘗試一下 ?
好了，現(xiàn)在通過本章的練習(xí)，使用jQuery Mobile主題，以美化你的操作界面吧！
以上內(nèi)容是否對(duì)您有幫助：
更多建議：