Forma móvil jQuery

tabla sensible

diseño de respuesta se utiliza generalmente para adaptarse al usuario una variedad de dispositivos móviles.

Tan sólo hay que utilizar un nombre de clase simple, jQuery Mobile se ajustará automáticamente el contenido de la página de acuerdo con el tamaño de la pantalla.

forma sensible al contenido de la página en los dispositivos móviles y de escritorio para terminar una buena adaptación.

tabla sensible hay dos tipos: de reflujo (reflujo) y cambio de columna.

Forma de reflujo

modelo de formulario de reflujo suficientemente pantalla de gran tamaño se muestra en posición horizontal, mientras que el tamaño de la pantalla es lo suficientemente pequeño, todos los datos se convierten en vertical.

Crear una tabla en el elemento <table> para agregar datos en roles = "mesa" y la categoría "ui-sensible":

Ejemplos

Trate »

	Para la forma de respuesta, se debe incluir el <culata en T> y <tbody> elemento. No utilice el atributo rowspan o colspan, el cuadro de respuesta no es soportado por estas dos propiedades.

cambio de columna

modelo de cambio de columna se ocultará cuando el ancho de los datos no es suficiente.

Crear un interruptor de modo de columna de la tabla es la siguiente:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

De forma predeterminada, jQuery Mobile primera ocultar la columna a la derecha de la tabla. Sin embargo, puede especificar el orden de las columnas ocultas mediante la adición de atributo de prioridad de los datos en el encabezado de la tabla (<th>), el valor de prioridad de datos puede ser de 1 (prioridad más alta) a 6 (prioridad más baja):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>

	Si no se especifica la prioridad no está en la lista, a continuación, la columna siempre existirá y no se oculta.

La combinación de los anteriores dos piezas de código juntos para crear una mesa de cambio de columna, de modo que los usuarios pueden personalizar las columnas que desea ocultar la tabla:

Ejemplos

<Tabla de datos-role = "mesa " en modo de datos = "columntoggle" class = "ui-sensible" id = "myTable">
<Culata en T>
<Tr>
<Th datos con prioridad = "6 "> CustomerID </ th>
<TH> NombreCliente </ th>
<Th datos con prioridad = "1 "> NombreContacto </ th>
<Th datos con prioridad = "2 "> Dirección </ th>
<Th datos con prioridad = "3 "> City </ th>
<Th datos con prioridad = "4 "> PostalCode </ th>
<Th datos con prioridad = "5 "> País </ th>
</ Tr>
</ Culata en T>
<Tbody>
<Tr>
<Td> 1 </ td>
<Td> Alfreds Futterkiste </ td>
<Td> Maria Anders </ td>
<Td> Obere Str. 57 </ td>
<Td> Berlín </ td>
<Td> 12209 </ td>
<Td> Alemania </ td>
</ Tr>
</ Tbody>
</ Table>

Trate »

Podemos usar el atributo de texto btn-data-columna para modificar el texto de la tabla del interruptor: