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