Forma móvil jQuery
jQuery Mobile añadirá automáticamente de forma automática el estilo de formularios HTML, que se vean más atractivo, más amigable al tacto.
Estructura jQuery Form Mobile
jQuery Mobile para utilizar CSS para elementos de formulario HTML de estilo para hacerlos más atractivos y fáciles de usar.
En jQuery Mobile, puede utilizar los siguientes controles de formulario:
- cuadro de entrada de texto
- Buscar cuadro de entrada
- botón de opción
- caja
- Seleccione Menú
- deslizador
- Activa el interruptor de palanca
Cuando se utiliza la forma jQuery Mobile, usted debe saber:
- <Forma> debe tener un método y un atributo de acción
- Cada elemento del formulario debe tener un único atributo "id". id debe ser único en todas las páginas de todo el sitio. Esto es porque se presenta mecanismo de página única jQuery Mobile navegación de modo que una pluralidad de diferentes páginas a la vez
- Cada elemento del formulario debe tener una etiqueta. pestaña Configuración de las propiedades para que coincida con el elemento de identificación
Ejemplos
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
Trate »
Para ocultar la etiqueta, utilice la interfaz de usuario oculto accesible clase. Esto se utiliza a menudo cuando estás los atributos del elemento como una etiqueta de marcador de posición:
Ejemplos
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Trate »
Consejo: Podemos utilizar la técnica de claro-BTN = "true " atributo para añadir un botón para borrar el contenido de la caja de entrada (un icono X a la derecha del cuadro de entrada):
Ejemplos
<Input type = "text" name = "fname" = "fname" Identificación de datos-clara-BTN = "true">
Trate »
 | botón Borrar en el cuadro de entrada <input> elemento se utiliza, pero no en el <textarea> en. cuadro de búsqueda de datos btn-claro-El valor por defecto es "verdadero", se puede utilizar la técnica de claro-BTN = "false" para eliminar el icono. |
|---|
jQuery Mobile Forms icono
Formar el código del botón es el estándar HTML <input> (botón RESET, enviar). Ellos representación automáticamente estilos, adaptándose automáticamente los dispositivos móviles para escritorio:
Ejemplos
<Input type = "reset" value = "botón de reinicio">
<Input type = "submit" value = "botón Submit">
Trate »
Si es necesario añadir estilos adicionales en el botón <INPUT>, puede utilizar la siguiente tabla de datos * atributos:
| propiedad | valor | descripción |
|---|---|---|
| ficha esquinas | true | false | Especifica si un botón esquinas redondeadas ha |
| datos-icono | Manual de referencia de los iconos | Icono del botón de designación |
| ficha iconpos | left | right | arriba | abajo | notext | Especificar la ubicación del icono |
| datos en línea | true | false | Especifica si el botón en línea |
| datos-mini | true | false | Especifica si el botón de mini |
| técnica de la sombra | true | false | Especifica si el botón para añadir efectos de sombra |
Botón para añadir iconos:
<Input type = "reset" value = "botón de reinicio">
<Input type = "submit" value = "botón Submit">
Trate »
campo contenedor
Para hacer etiquetas y elementos de formulario parecer más adecuado para pantalla ancha, por favor, o <fieldset> elemento que rodea el elemento label / formulario se utiliza con "ui-campo contiene" clase <div>:
Ejemplos
<div class="ui-field-contain" >
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Trate »
| ui-campo contiene clases basándose en el ancho de la página para agregar estilos para las etiquetas y controles de formulario. Cuando el ancho de la página es mayor que 480px, se colocará automáticamente el control de etiqueta y la forma en la misma línea. Cuando el ancho de la página es inferior a 480px, la etiqueta se colocará en la parte superior los elementos de formulario. |
|---|
Clave: Para evitar jQuery Mobile añadir automáticamente los elementos seleccionables estilo, el uso de datos en función de atributo = "none":
Ejemplos
<input type="text" name="fname" id="fname" data-role="none" >
Trate »
| jQuery Mobile en el envío del formulario jQuery Mobile gestiona automáticamente formulario de presentación de AJAX, y el servidor de integración intenta responder a la DOM de la aplicación. |
|---|