jQuery Mobile 主题
jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:
1 | <div data-role="page" data-theme="a|b|c|d|e">
|
| 值 |
描述 |
实例 |
| a |
默认。黑色背景白色文字 |
实例» |
| b |
蓝色背景白色文字/ 黑色文字灰色背景 |
实例» |
| c |
黑色文字浅灰色背景 |
实例» |
| d |
黑色为主白色背景 |
实例» |
| e |
黑色文字橙色背景 |
实例» |
|
你喜欢混合主题！
默认情况下， jQuery Mobile 使用 "a" 主题 (黑色) 来设置头部和底部 ， "c" 主题 (浅灰色) 设置页面内容。 但是，你可以自定义设置你喜欢的混合主题。 |
主题头部，内容和底部
实例
1 2 | <div class="example_code notranslate"><div data-role="header" data-theme="b"></div><br><br><div data-role="content" data-theme="a"></div><br><br><div data-role="footer" data-theme="e"></div><br>
</div>
|
效果预览 »
主题对话框
实例
1 2 | <div class="example_code notranslate"><a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a><br><br><div data-role="page" id="pagetwo" data-overlay-theme="e"><br> <div data-role="header" data-theme="b"></div><br> <div data-role="content" data-theme="a"></div><br> <div data-role="footer" data-theme="c"></div><br></div><br>
</div>
|
效果预览 »
主题按钮
实例
1 2 | <div class="example_code notranslate"><a href="#" data-role="button" data-theme="a">Button</a><br><a href="#" data-role="button" data-theme="b">Button</a><br><a href="#" data-role="button" data-theme="c">Button</a><br>
</div>
|
效果预览 »
主题图标
实例
1 2 | <div class="example_code notranslate"><a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a><br>
</div>
|
效果预览 »
头部和底部的主题按钮
实例
1 2 | <div class="example_code notranslate"><div data-role="header"><br> <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a><br> <h1>Welcome To My Homepage</h1><br> <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a><br></div><br><br><div data-role="footer"><br> <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a><br> <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a><br> <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a><br></div><br>
</div>
|
效果预览 »
主题导航条
实例
1 | <div class="example_code notranslate"><div data-role="footer" data-theme="e"><br> <h1>Insert Footer Text Here</h1><br> <div data-role="navbar"><br> <ul><br> <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li><br> <li><a href="#" data-icon="arrow-r">Button 2</a></li><br> <li><a href="#" data-icon="arrow-r">Button 3</a></li><br> <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li><br> </ul><br> </div> <br></div></div>
|
效果预览 »
主题可折叠按钮和内容
实例
1 | <div class="example_code notranslate"><div data-role="collapsible" data-theme="b" data-content-theme="e"><br> <h1>Click me - I'm collapsible!</h1><br> <p>I'm the expanded content.</p><br></div></div>
|
效果预览 »
主题列表
实例
1 | <div class="example_code notranslate"><ul data-role="listview" data-theme="e"><br> <li><a href="#">List Item</a></li><br> <li data-theme="a"><a href="#">List Item</a></li><br> <li data-theme="b"><a href="#">List Item</a></li><br> <li><a href="#">List Item</a></li><br></ul></div>
|
效果预览 »
主题分割按钮
实例
1 | <ul data-role="listview" data-split-theme="e">
|
效果预览 »
主题可折叠列表
实例
1 | <div class="example_code notranslate"><div data-role="collapsible" data-theme="b" data-content-theme="e"><br> <ul data-role="listview"><br> <li><a href="#">Agnes</a></li><br> </ul><br></div></div>
|
效果预览 »
主题表单
实例
1 | <div class="example_code notranslate"><label for="name">Full Name:</label><br><input type="text" name="text" id="name" data-theme="a"><br><br><label for="colors">Choose Favorite Color:</label><br><select id="colors" name="colors" data-theme="b"><br> <option value="red">Red</option><br> <option value="green">Green</option><br> <option value="blue">Blue</option><br></select></div>
|
效果预览 »
主题可折叠表单
实例
1 | <div class="example_code notranslate"><fieldset data-role="collapsible" data-theme="b" data-content-theme="e"><br> <legend>Click me - I'm collapsible!</legend></div>
|
效果预览 »
添加新主题
jQuery Mobile 可以在移动页面添加新主题。
通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（f-z）,并在样式中添加你喜欢的颜色和字体。
你也可以在 HTML 文档中添加主题的新样式 - 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content:
实例
1 2 | <div class="example_code notranslate"><style><br>.ui-bar-f<br>{<br>color:green;<br>background-color:yellow;<br> }<br>.ui-body-f<br>{<br>font-weight:bold;<br>color:purple;<br>}<br></style><br>
</div>
|
效果预览 »
