Framework7 - Selector

Descripción

El selector se parece al selector nativo de iOS y es un componente poderoso que le permite elegir cualquier valor de la lista y también se usa para crear selectores de superposición personalizados. Puede utilizar el selector como componente en línea o como superposición. El selector de superposición se convertirá automáticamente a Popover en tabletas (iPad).

Con el método de la siguiente aplicación, puede crear e inicializar el método JavaScript:

myApp.picker(parameters)

Cuando los parámetros son objetos obligatorios, se utilizan para inicializar la instancia del selector y es un método obligatorio.

Parámetros del selector

La siguiente tabla especifica los parámetros disponibles en los selectores:

S. No	Parámetros y descripción	Tipo	Defecto
1	container Cadena con selector de CSS o HTMLElement utilizado para generar Picker HTML para un selector en línea.	cadena o HTMLElement	-
2	input El elemento de entrada relacionado colocado con la cadena con selector CSS o HTMLElement.	cadena o HTMLElement	-
3	scrollToInput Se utiliza para desplazarse por la ventana gráfica (contenido de la página) de entrada, siempre que se abre el selector.	booleano	cierto
4	inputReadOnly Se utiliza para establecer el atributo "solo lectura" en una entrada especificada.	booleano	cierto
5	convertToPopover Se utiliza para convertir el selector modal a Popover en pantallas grandes como iPad.	booleano	cierto
6	onlyOnPopover Puede abrir el selector en Popover habilitándolo.	booleano	cierto
7	cssClass Para seleccionar modal, puede usar un nombre de clase CSS adicional.	cuerda	-
8	closeByOutsideClick Puede cerrar el selector haciendo clic fuera del selector o elemento de entrada habilitando el método.	booleano	falso
9	toolbar Se utiliza para habilitar la barra de herramientas modal del selector.	booleano	cierto
10	toolbarCloseText Se utiliza para el botón Listo / Cerrar de la barra de herramientas.	cuerda	'Hecho'
11	toolbarTemplate Es la plantilla HTML de la barra de herramientas, de forma predeterminada es una cadena HTML con la siguiente plantilla: `<div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>`	cuerda	-

Parámetros de selector específicos

La siguiente tabla enumera los parámetros de selector específicos disponibles:

S. No	Parámetros y descripción	Tipo	Defecto
1	rotateEffect Permite el efecto de rotación 3D en el selector.	booleano	falso
2	momentumRatio Cuando suelta el selector después de un toque rápido y un movimiento, produce más impulso.	número	7
3	updateValuesOnMomentum Se utiliza para actualizar los selectores y los valores de entrada durante el impulso.	booleano	falso
4	updateValuesOnTouchmove Se utiliza para actualizar los selectores y los valores de entrada durante el movimiento táctil.	booleano	cierto
5	value La matriz tiene sus valores iniciales y también cada elemento de la matriz representa el valor de la columna relacionada.	formación	-
6	formatValue La función se utiliza para formatear el valor de entrada y debe devolver un valor de cadena nuevo / formateado. Los valores y displayValues son una matriz de columnas relacionadas.	función (p, valores, displayValues)	-
7	cols Cada elemento de la matriz representa un objeto con parámetros de columna.	formación	-

Devolución de llamada de parámetros de selector

La siguiente tabla muestra las listas de funciones de devolución de llamada disponibles en los selectores:

S. No	Devolución de llamada y descripción	Tipo	Defecto
1	onChange La función de devolución de llamada se ejecutará siempre que cambie el valor del selector y los valores y displayValues sean matrices de columnas relacionadas.	función (p, valores, displayValues)	-
2	onOpen La función de devolución de llamada se ejecutará siempre que se abra el selector.	función (p)	-
3	onClose La función de devolución de llamada se ejecutará siempre que se cierre el selector.	función (p)	-

Parámetros de columna

En el momento de la configuración de Picker, necesitamos pasar el parámetro cols . Es una matriz representada como, donde cada elemento es un objeto con parámetros de columna -

S. No	Parámetros y descripción	Tipo	Defecto
1	values Puede especificar los valores de las columnas de cadena con una matriz.	formación	-
2	displayValues Tiene una matriz con valores de columnas de cadena y mostrará el valor del parámetro de valores , cuando no se especifique.	formación	-
3	cssClass El nombre de la clase CSS que se utiliza para establecer el contenedor HTML de la columna.	cuerda	-
4	textAlign Se utiliza para establecer la alineación del texto de los valores de las columnas y puede ser "izquierda", "centro" o "derecha" .	cuerda	-
5	width El ancho se calcula automáticamente, por defecto. Si necesita arreglar los anchos de columna en el selector con columnas dependientes que deberían estar en px .	número	-
6	divider Se usa para la columna que debería ser un divisor visual, no tiene ningún valor.	booleano	falso
7	content Se utiliza para especificar la columna divisora (divider: true) con el contenido de la columna.	cuerda	-

Parámetro de devolución de llamada de columna

S. No	Devolución de llamada y descripción	Tipo	Defecto
1	onChange Siempre que el valor de la columna cambie, se ejecutará la función de devolución de llamada. El valor y displayValue representan el valor actual de la columna y displayValue .	función (p, valor, displayValue)	-

Propiedades del selector

La variable Picker tiene muchas propiedades que se dan en la siguiente tabla:

S. No	Propiedades y descripción
1	myPicker.params Puede inicializar los parámetros pasados con el objeto.
2	myPicker.value El valor seleccionado para cada columna está representado por una matriz de elementos.
3	myPicker.displayValue El valor de visualización seleccionado para cada columna está representado por una matriz de elementos.
4	myPicker.opened Cuando se abre el selector, se establece en el valor verdadero .
5	myPicker.inline Cuando el selector está en línea, se establece en valor verdadero .
6	myPicker.cols Las columnas del selector tienen sus propios métodos y propiedades.
7	myPicker.container La instancia de Dom7 se utiliza para el contenedor HTML.

Métodos de selector

La variable del selector tiene métodos útiles, que se dan en la siguiente tabla:

S. No	Métodos y descripción
1	myPicker.setValue(values, duration) Úselo para establecer un nuevo valor de selector. Los valores están en una matriz donde cada elemento representa el valor de cada columna. duración - Es la duración de la transición en ms.
2	myPicker.open() Úselo para abrir Selector.
3	myPicker.close() Úselo para cerrar el selector.
4	myPicker.destroy() Úselo para destruir la instancia de Picker y eliminar todos los eventos.

Propiedades de columna

Cada columna en la matriz myPicker.cols también tiene sus propias propiedades útiles, que se dan en la siguiente tabla:

//Get first column
var col = myPicker.cols[0];

S. No	Propiedades y descripción
1	col.container Puede crear una instancia con contenedor HTML de columna.
2	col.items Puede crear una instancia con elementos HTML de elementos de columna.
3	col.value Se utiliza para seleccionar el valor de la columna actual.
4	col.displayValue Se utiliza para seleccionar el valor de visualización de la columna actual.
5	col.activeIndex Proporcione el número de índice actual, que es el elemento seleccionado / activo.

Métodos de columna

Los métodos de columna útiles se dan en la siguiente tabla:

S. No	Métodos y descripción
1	col.setValue(value, duration) Se usa para establecer un nuevo valor para la columna actual. El valor debe ser un valor nuevo y la duración es la duración de la transición expresada en ms.
2	col.replaceValues(values, displayValues) Se utiliza para reemplazar los valores de columna y displayValues por otros nuevos.

Se utiliza para acceder a la instancia de Picker desde su contenedor HTML, siempre que inicialice Picker como Picker en línea.

var myPicker = $$('.picker-inline')[0].f7Picker;

Hay diferentes tipos de selectores como se especifica en la siguiente tabla:

S. No	Tipos de pestañas y descripción
1	Selector con valor único Es un componente poderoso que le permite elegir cualquier valor de la lista.
2	Dos valores y efecto de rotación 3D En el selector se puede utilizar para el efecto de rotación 3D.
3	Valores dependientes Los valores dependen unos de otros para el elemento especificado.
4	Barra de herramientas personalizada Puede utilizar uno o más selectores en una sola página para personalizar.
5	Selector en línea / Fecha-hora Puede seleccionar el número de valores en el selector en línea, como la fecha tiene fecha, mes, año y la hora tiene horas, minutos, segundos

↰ Previous page Next page ↱