Framework7 - Selección inteligente

Descripción

La selección inteligente es una manera fácil de cambiar selecciones de formulario a páginas dinámicas mediante el uso de grupos de casillas de verificación y entradas de radio.

Podemos usar la selección inteligente en varios tipos como se especifica en la siguiente tabla:

S. No Tipo y descripción
1 Diseño de selección inteligente

El diseño de selección inteligente define una vista de lista dentro del elemento de selección utilizando la clase de selección inteligente .

2 Selección inteligente con barra de búsqueda

La selección inteligente busca los elementos usando la barra de búsqueda y la habilita configurando la clase de barra de búsqueda de datos en verdadero.

3 Título de página personalizado y texto de vínculo posterior

Se puede establecer el título de página y un enlace para seleccionar usando inteligentes -page-title datos y los datos para el regreso de texto atributos.

4 Abrir en ventana emergente

La selección inteligente se puede abrir como una ventana emergente usando el atributo de apertura de datos en la ventana emergente .

5 Abrir en selector

La selección inteligente se puede mostrar como modal de selector configurando el atributo de apertura de datos en selector .

6 Iconos, colores e imágenes personalizados

Se puede definir icono personalizado, color o imagen en el selecto inteligente utilizando la técnica de la opción-icono , datos opción de color y con opción de dataimagen atributos respectivamente.

7 Selección múltiple y grupo de opciones

La selección inteligente permite utilizar múltiples opciones de selección y grupo mediante el uso de los atributos de grupo múltiple y optgroup .

8 Selección múltiple y longitud máxima

La selección inteligente permite seleccionar un número limitado de elementos mediante el atributo maxlength .

Puede tener algunos tipos más de selección inteligente, que se pueden usar en diferentes escenarios, como se enumera en la tabla a continuación:

S. No Tipo y descripción Atributo
1

Close Smart Select On User Select

Puede cerrar la selección inteligente cuando el usuario selecciona cualquier opción.

data-back-on-select = "verdadero"
2

Smart Select With Virtual List

La lista virtual se puede usar con la selección inteligente si tiene muchas opciones.

data-virtual-list = "verdadero"
3

Smart Select Color Themes

Puede especificar los temas de color para el formulario y la barra de navegación en la página de selección inteligente.

data-form-theme = "color"

data-navbar-theme = "color"

4

Set Smart Select Value By Option Text

El valor de la selección inteligente se puede establecer mediante el valor de la opción.

valor de selección inteligente
5

Open Smart Select Using JavaScript

Puede abrir la selección inteligente utilizando el método JavaScript.

myApp.smartSelectOpen (smartSelect)

  • smartSelect - Es HTMLElement o parámetro de cadena utilizado para abrir la selección inteligente especificada.

6

Adding Options Dynamically

Puede agregar opciones dinámicamente a la selección inteligente, incluso si ya están abiertas.

myApp.smartSelectAddOption (seleccionar, opciónHTML, índice)

  • smartSelect - Es HTMLElement o parámetro de cadena utilizado para abrir la selección inteligente especificada.

  • optionHTML - Es un elemento de cadena requerido que se puede usar para agregar la opción HTML.

  • index - Especifica el número de índice para la nueva opción.