雷林鹏分享:jQuery Mobile CSS 类

吃可爱长大的小学妹 提交于 2020-04-08 03:51:33

  jQuery Mobile CSS 类

  jQuery CSS 类

  jQuery Mobile CSS 类来设置不同元素的样式。

  以下列表包含了通用的 CSS 样式:

  全局类

  以下类可以在 jQuery Mobile 小工具中使用 (按钮,工具条,面板,表格,列表等。):

  Class描述

  ui-corner-all为元素添加圆角

  ui-shadow为元素添加阴影

  ui-overlay-shadow为元素添加多层阴影

  ui-mini让元素变小

  按钮类

  除了全局类外,你可以向 元素添加以下类 (不是 按钮):

 

  Class描述

  ui-btn添加在 元素上并以按钮形式展示

  ui-btn-inline在同一行上显示按钮

  ui-btn-icon-top定位图标在按钮文本之上

  ui-btn-icon-right定位图标在按钮文本的右边

  ui-btn-icon-bottom定位图标在按钮文本之下

  ui-btn-icon-left定位图标在按钮文本的左边

  ui-btn-icon-notext只显示图标

  ui-btn-a|b指定按钮演示。"a" 是默认的 (灰色背景黑色文本样式), "b" 修改颜色为黑色背景白色文本

  图标类

  所有可用图片的类用在

元素上 (查看 jQuery Mobile 图标参考手册 了解如何在其他元素上使用):

 

  Class图标描述图标

ui-icon-action动作 (一般用于页面跳转切换)

action

ui-icon-alert三角形内的感叹号

alert

ui-icon-audio音响/音箱

audio

ui-icon-arrow-d-l左下角箭头

arrow-d-l

ui-icon-arrow-d-r右下角箭头

arrow-d-r

ui-icon-arrow-u-l左上角箭头

arrow-u-l

ui-icon-arrow-u-r右上角箭头

arrow-u-r

ui-icon-arrow-l左角箭头

arrow-l

ui-icon-arrow-r右角箭头

arrow-r

ui-icon-arrow-u向上箭头

arrow-u

ui-icon-arrow-d向下箭头

arrow-d

ui-icon-back返回

back

ui-icon-bars三条水平线,一般用于展示列表按钮图标

bars

ui-icon-bullets用于展示列表按钮图标

bullets

ui-icon-calendar日历

calendar

ui-icon-camera相机

camera

ui-icon-carat-d向下滑动图标

carat-d

ui-icon-carat-l向左滑动图标

carat-l

ui-icon-carat-r向右滑动图标

carat-r

ui-icon-carat-u向上滑动图标

carat-u

ui-icon-check勾选

check

ui-icon-clock闹钟

clock

ui-icon-cloud云

cloud

ui-icon-comment评论 / 消息

comment

ui-icon-delete删除

delete

ui-icon-edit编辑 / 铅笔

edit

ui-icon-eye眼睛

eye

ui-icon-forbidden禁用标识 sign

forbidden

ui-icon-forward撤销 - (返回上一步)

forward

ui-icon-gear齿轮,一般用于设置按钮图标

gear

ui-icon-grid网格

grid

ui-icon-heart心型,可用于文章收藏

heart

ui-icon-home主页

home

ui-icon-info信息

info

ui-icon-location定位

location

ui-icon-lock锁

lock

ui-icon-mail邮件 / 信封

mail

ui-icon-minus减号

minus

ui-icon-navigation导航

navigation

ui-icon-phone电话

phone

ui-icon-power开关 (On/off)

power

ui-icon-plus加号

plus

ui-icon-recycle循环 标识

recycle

ui-icon-refresh刷新

refresh

ui-icon-search搜索 / 放大镜

search

ui-icon-shop商店/购物袋

shop

ui-icon-star星号

star

ui-icon-tag标签

tag

ui-icon-user用户 / 人物

user

ui-icon-video视频 / 相机

camera1

  主题类 Classes

  jQuery Mobile 提供了两个主题类: a (灰) 和 b (黑)。 但是,你可以创建你自己的自定义类 - 可定义到字母 "z" (查看 jQuery Mobile 主题 )。 下表列出了可用的主题类。 字母 (a-z) 意为样式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。

  Class描述

  ui-bar-(a-z)指定栏目演示 - 头部,底部及其他栏目

  ui-body-(a-z)指定内容块的颜色 - 页面内容部分 ( 1.4.0 版本已废弃), 列表视图, 弹窗, 侧栏,面板,加载,折叠。

  ui-btn-(a-z)指定按钮颜色

  ui-group-theme-(a-z)定义了控制组的演示 listviews 和 collapsible 集合。

  ui-overlay-(a-z)定义了页面背景颜色,包括对话框,弹窗和其他出现在最顶层的页面容器

  ui-page-theme-(a-z)定义了页面演示

  网格类

  网格中的列是等宽的(合计是 100%),没有边框、背景、margin 或 padding。 这里有四种布局网格可供使用:

  网格类列列宽对应实例

  ui-grid-solo1100%ui-block-a尝试一下

  ui-grid-a250% / 50%ui-block-a|b尝试一下

  ui-grid-b333% / 33% / 33%ui-block-a|b|c 尝试一下

  ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|d尝试一下

  ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e尝试一下

  更多信息可以查看 jQuery Mobile 网格 章节。

  本文转载自:w3cschool

 

  (编辑:雷林鹏 来源:网络 侵删)

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!