jQuery Mobile 主题(二)

举报
上传头像 发表于 2021/04/20 10:34:45 2021/04/20
【摘要】 主题列表实例<ul data-role="listview" data-theme="b">  <li><a href="#">List Item</a></li>  <li><a href="#">List Item</a></li>  <li data-theme="a"><a href="#">List Item</a></li>  <li><a href="#">List Item<...

主题列表

实例

<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

尝试一下 »

主题分割按钮

实例

<ul data-role="listview" data-split-theme="b">

尝试一下 »

主题可折叠列表

实例

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <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="b">

<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="b">
<legend>Click me - I'm collapsible!</legend>

尝试一下 »

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块,然后重命令字母类名(c-z),并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式, 工具条添加类: ui-bar-(a-z) ,文本内容添加类: ui-body-(a-z) ,页面添加类:ui-page-theme-(a-z) 。

实例

<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。