jQuery Mobile clase CSS
clase CSS jQuery
jQuery Mobile clase CSS para elementos de estilo diferente.
La siguiente lista contiene los estilos CSS generales:
Clase mundial
Las siguientes clases se pueden utilizar (botones, barras de herramientas, paneles, mesas, listas, etc.) en la herramienta de jQuery Mobile:
| clase | descripción |
|---|---|
| ui-esquina-todo | Adición de un elemento de filete |
| ui-sombra | Para añadir un elemento de sombra |
| ui-superposición de la sombra | Adición de un elemento de múltiples capas de sombra |
| ui-mini | Dejar que los elementos más pequeños |
clase Button
Además de la clase mundial, puede añadir la siguiente clase (no el botón <input>) en <a> o <> elemento:
| clase | descripción |
|---|---|
| ui-btn | Añadir los elementos <a> como botones y la pantalla |
| ui-btn-inline | botón de visualización en la misma línea |
| ui-btn-icono-top | icono de destino sobre el texto del botón |
| ui-btn-icono-derecha | icono del objetivo a la derecha del texto del botón |
| ui-btn-icono-inferior | icono de destino a continuación el texto del botón |
| ui-btn-icono-izquierda | icono del objetivo a la izquierda del texto del botón |
| ui-btn-icono-notext | Mostrar sólo el icono |
| ui-btn-a | b | botón de designación de demostración. "A" es el valor predeterminado (texto negro sobre un fondo gris estilo), "b" para cambiar el color de un fondo negro con el texto blanco |
icono de la clase
Clase de todas las imágenes disponibles utilizados en <a> y <button> (Ver manual de jQuery Mobile icono de referencia para aprender a utilizar en otros elementos):
| Class | 图标描述 | 图标 |
|---|---|---|
| ui-icon-action | 动作 (一般用于页面跳转切换) |  |
| ui-icon-alert | 三角形内的感叹号 |  |
| ui-icon-audio | 音响/音箱 |  |
| ui-icon-arrow-d-l | 左下角箭头 |  |
| ui-icon-arrow-d-r | 右下角箭头 |  |
| ui-icon-arrow-u-l | 左上角箭头 |  |
| ui-icon-arrow-u-r | 右上角箭头 |  |
| ui-icon-arrow-l | 左角箭头 |  |
| ui-icon-arrow-r | 右角箭头 |  |
| ui-icon-arrow-u | 向上箭头 |  |
| ui-icon-arrow-d | 向下箭头 |  |
| ui-icon-back | 返回 |  |
| ui-icon-bars | 三条水平线，一般用于展示列表按钮图标 |  |
| ui-icon-bullets | 用于展示列表按钮图标 |  |
| ui-icon-calendar | 日历 |  |
| ui-icon-camera | 相机 |  |
| ui-icon-carat-d | 向下滑动图标 |  |
| ui-icon-carat-l | 向左滑动图标 |  |
| ui-icon-carat-r | 向右滑动图标 |  |
| ui-icon-carat-u | 向上滑动图标 |  |
| ui-icon-check | 勾选 |  |
| ui-icon-clock | 闹钟 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 评论 / 消息 |  |
| ui-icon-delete | 删除 |  |
| ui-icon-edit | 编辑 / 铅笔 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁用标识 sign |  |
| ui-icon-forward | 撤销 - (返回上一步) |  |
| ui-icon-gear | 齿轮，一般用于设置按钮图标 |  |
| ui-icon-grid | 网格 |  |
| ui-icon-heart | 心型，可用于文章收藏 |  |
| ui-icon-home | 主页 |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 锁 |  |
| ui-icon-mail | 邮件 / 信封 |  |
| ui-icon-minus | 减号 |  |
| ui-icon-navigation | 导航 |  |
| ui-icon-phone | 电话 |  |
| ui-icon-power | 开关 (On/off) |  |
| ui-icon-plus | 加号 |  |
| ui-icon-recycle | 循环 标识 |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大镜 |  |
| ui-icon-shop | 商店/购物袋 |  |
| ui-icon-star | 星号 |  |
| ui-icon-tag | 标签 |  |
| ui-icon-user | 用户 / 人物 |  |
| ui-icon-video | 视频 / 相机 |  |
Tema categoría Clases
tema de jQuery Mobile ofrece dos clases: un (gris) y B (negro). Sin embargo, puede crear sus propias clases personalizadas - para definir la letra "z" (Ver temas jQuery Mobile ). La siguiente tabla muestra la clase de temas disponibles. Letras (az) significa que puede definir un estilo de z. Por ejemplo ui-bar o una interfaz de usuario de b-bar y similares.
| clase | descripción |
|---|---|
| ui-negociación (az) | Especificar la columna de demostración - encabezado, pie de página y en otras secciones |
| ui-cuerpo-(az) | Especifica el color de piezas de contenido - página de la sección de contenido (versión 1.4.0 obsoleto), de lista emergente, barra lateral, el panel, carga, se derrumbó. |
| ui-btn- (az) | Especificar un color del botón |
| ui-grupo-tema-(az) | Define un grupo de control listviews presentación y plegable. |
| ui-Overlay (az) | Define los colores de fondo página, incluyendo cuadros de diálogo, ventanas emergentes y otras páginas de nivel superior aparecen en el envase |
| ui-page-tema-(az) | Definir página de prueba |
la clase de cuadrícula
columnas de la cuadrícula tienen la misma anchura (en total 100%), sin borde, fondo, margen o material de relleno. Hay cuatro cuadrícula de diseño están disponibles:
| la clase de cuadrícula | fila | Ancho de columna | correspondencia | Ejemplos |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-bloque-a | probar |
| ui-grid-A | 2 | 50% / 50% | ui-bloque-a | b | probar |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-bloque-a | b | c | probar |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloque-a | b | c | d | probar |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloque-a | b | c | d | e | probar |
Hay más información disponible jQuery Mobile cuadrícula sección.