El atributo de icono de datos utiliza los mismos valores que las clases de CSS especificadas en el tema de "Iconos". La única diferencia es que, en lugar de especificar class = "ui-icon- value ", especifica el atributo de data-icon="value".
| Attribute Value | Description | Icon |
|---|---|---|
| data-icon="home" | Home | |
| data-icon="arrow-r" | Flecha derecha | |
| data-icon="search" | Buscar |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Bienvenido a mi pagina</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Inicio</a></li>
<li><a href="#" data-icon="arrow-r">Pagina dos</a></li>
<li><a href="#" data-icon="search">Buscar</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>Aqui va mi contenido..</p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Listado de iconos en JQuery Mobile
| Value | Description | Icon | Example |
|---|---|---|---|
| action | Action (arrow pointing clockwise out of a box) | ||
| alert | Alert | ||
| audio | Audio / Sound / Speakers | ||
| arrow-d-l | Arrow pointing downwards to the left | ||
| arrow-d-r | Arrow pointing downwards to the right | ||
| arrow-u-l | Arrow pointing upwards to the left | ||
| arrow-u-r | Arrow pointing upwards to the right | ||
| arrow-l | Arrow pointing left | ||
| arrow-r | Arrow pointing right | ||
| arrow-u | Arrow pointing up | ||
| arrow-d | Arrow pointing down | ||
| back | Back (curved arrow pointing counterclockwise upwards) | ||
| bars | Bars (three horizontal bars over each other) | ||
| bullets | Bullets (three horizontal bullets over each other) | ||
| calendar | Calendar | ||
| camera | Camera | ||
| carat-d | Carat pointing down | ||
| carat-l | Carat pointing left | ||
| carat-r | Carat pointing right | ||
| carat-u | Carat pointing up | ||
| check | Checkmark | ||
| clock | Clock | ||
| cloud | Cloud | ||
| comment | Comment | ||
| delete | Delete (X) | ||
| edit | Edit / Pencil | ||
| eye | Eye | ||
| forbidden | Forbidden sign | ||
| forward | Forward | ||
| gear | Gear | ||
| grid | Grid | ||
| heart | Heart / Love symbol | ||
| home | Home | ||
| info | Information | ||
| location | Location / GPS | ||
| lock | Lock / Padlock | ||
| Mail / Letter | |||
| minus | Minus | ||
| navigation | Navigation | ||
| phone | Telephone | ||
| power | Power (On/off) | ||
| plus | Plus | ||
| recycle | Recycle | ||
| refresh | Refresh | ||
| search | Search | ||
| shop | Shop / Pag / Purse | ||
| star | Star | ||
| tag | Tag | ||
| user | User / Person | ||
| video | Video Camera |
No hay comentarios:
Publicar un comentario