jQuery Mobile主题（一）
【摘要】 jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。通过设置元素的data-theme属性可以自定义应用的外观:<a href="#" class="ui-btn ui-btn-a|b">按钮</a>按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设...
jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色：
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>主题头部和底部
实例
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
尝试一下 »
主题对话框的头部底部
实例
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
尝试一下 »
主题按钮
主题图标
主题弹窗
头部和底部的主题按钮
实例
<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn">搜索</a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">在Facebook上关注我</a>
<a href="#" class="ui-btn">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-btn-b">在Instagram上关注我</a>
</div>
<a href="#" class="ui-btn ui-btn-b">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn">搜索</a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">在Facebook上关注我</a>
<a href="#" class="ui-btn">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-btn-b">在Instagram上关注我</a>
</div>
尝试一下 »
主题导航栏
实例
<div data-role="footer" data-theme="b">
<h1>文本头部</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">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>文本头部</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">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="b">
<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>
尝试一下 »
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）