Latest web development tutorials

lista de contenidos de jQuery Mobile


Lista icono de jQuery Mobile

De forma predeterminada, cada elemento de la lista contendrá un icono de flecha "quilates-r" (flecha derecha). Si desea cambiar este icono se puede utilizar el atributo de icono de datos:

Ejemplos

<Ul datos-role = "listview">
<Li> <a href="#"> defecto es </a> flecha derecha </ li>
<Li-icono de datos = "plus"> <a href="#">-icono de datos = "plus" </a> </ li>
<Data-icono de Li = "menos"> <a-icono de datos href="#"> = "menos" </a> </ li>
<Li-icono de datos = "delete"> <a href="#"> datos-icon = "eliminar" </a> </ li>
<Data-icono de Li = "localización"> <a-icono de datos href="#"> = "localización" </a> </ li>
<Data-icono de Li = "true"> <a href="#"> datos-icon = "false" </a> </ li>
</ Ul>

Trate »
nota datos-icon = "false" se eliminará el icono.

A más completos iconos de los botones de jQuery Mobile, visite nuestro Manual de Referencia de iconos de jQuery Mobile .


icono 16x16

Si desea agregar a su lista de criterios icono 16x16px, puede agregar el elemento <img> en los elementos de la lista y utilizar la categoría "ui-li-icono":

Ejemplos

<Ul datos-role = "listview">
<Li> <a href="#"> <img src = "us.png" alt = "EE.UU." class = "ui-li-icono"> EE.UU. </a> </ li>
</ Ul>

Trate »

Lista de jQuery Mobile miniatura

Una imagen más grande que 16x16px, añadir el elemento <img> en el enlace.

jQuery Mobile se reduce o amplía automáticamente la imagen para 80x80px:

Ejemplos

<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>

Trate »

Usar HTML estándar de añadir una lista de información:

Ejemplos

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>

Trate »


Lista icono de jQuery Mobile

En la lista de <img> elemento utiliza class = "ui-li-icono" Añadir 16x16px icono:

Ejemplos

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>

Trate »


botón de división

JQuery Mobile en la lista, a veces es necesario hacer dos opciones diferentes para el contenido de la operación, entonces, la necesidad de opciones botón de enlace segmentación. El método de segmentación es lograr elemento <li> para añadir un elemento <a>, se puede lograr el efecto de dividir la página.

jQuery Mobile establecerá automáticamente el icono de la flecha azul segundo enlace, se muestra el icono cuando el texto del enlace (si los hay) en el usuario pasa el ratón sobre el icono:

Ejemplos

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>

Trate »

Añadir algunas páginas y cuadros de diálogo para establecer el vínculo más rica en características:

Ejemplos

<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>

Trate »


burbuja digital

número de burbujas se utilizan para mostrar el número asociado elemento de la lista, como un buzón de correo:

Para añadir números de burbujas, utilizando los elementos en línea como <span>, establezca el atributo de clase "ui-li-count" y añadir los números:

Ejemplos

<ul data-role="listview">
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>

Trate »

Nota: La visualización correcta de una burbuja digital, se debe modificar la programación. Esto se explicará en capítulos posteriores.


Ejemplos

más ejemplos

lista emergente
Cómo crear una lista de ventanas emergentes

Cambiar los elementos de la lista de iconos enlace por defecto
Cómo establecer los elementos de la lista icono de enlace predeterminada (por defecto flecha hacia la derecha).

lista emergente plegable
Cómo crear una lista desplegable del pop.

lista plegable
Cómo crear una presentación / esconder la lista.

más formatos
Cómo crear un calendario.