Framework7 - Sélecteur

La description

Le sélecteur ressemble au sélecteur natif iOS et il s'agit d'un composant puissant qui vous permet de sélectionner toutes les valeurs de la liste et également utilisé pour créer des sélecteurs de superposition personnalisés. Vous pouvez utiliser le sélecteur comme composant en ligne ou comme superposition. Le sélecteur de superposition sera automatiquement converti en Popover sur les tablettes (iPad).

En utilisant la méthode de l'application suivante, vous pouvez créer et initialiser la méthode JavaScript -

myApp.picker(parameters)

Où les paramètres sont des objets obligatoires, utilisés pour initialiser l'instance de sélecteur et c'est une méthode obligatoire.

Paramètres du sélecteur

Le tableau suivant spécifie les paramètres disponibles dans les sélecteurs -

S.Non Paramètres et description Type Défaut
1

container

Chaîne avec sélecteur CSS ou HTMLElement utilisée pour générer le code HTML du sélecteur pour un sélecteur en ligne.

 chaîne ou HTMLElement -
2

input

L'élément d'entrée associé placé avec la chaîne avec le sélecteur CSS ou HTMLElement.

 chaîne ou HTMLElement -
3

scrollToInput

Il est utilisé pour faire défiler la fenêtre (contenu de la page) de l'entrée, chaque fois que le sélecteur est ouvert.

 booléen vrai
4

inputReadOnly

Utilisé pour définir l'attribut "lecture seule" sur l'entrée spécifiée.

 booléen vrai
5

convertToPopover

Il est utilisé pour convertir le sélecteur modal en Popover sur de grands écrans comme l'iPad.

 booléen vrai
6

onlyOnPopover

Vous pouvez ouvrir le sélecteur dans Popover en l'activant.

 booléen vrai
sept

cssClass

Pour sélectionner modal, vous pouvez utiliser un nom de classe CSS supplémentaire.

 chaîne -
8

closeByOutsideClick

Vous pouvez fermer le sélecteur en cliquant à l'extérieur du sélecteur ou de l'élément d'entrée en activant la méthode.

 booléen faux
9

toolbar

Il est utilisé pour activer la barre d'outils modale du sélecteur.

 booléen vrai
dix

toolbarCloseText

Utilisé pour le bouton de la barre d'outils Terminé / Fermer.

 chaîne 'Terminé'
11

toolbarTemplate

C'est un modèle HTML de barre d'outils, par défaut c'est une chaîne HTML avec le modèle suivant -

<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>
 chaîne -

Paramètres de sélecteur spécifiques

Le tableau suivant répertorie les paramètres de sélecteur spécifiques disponibles -

S.Non Paramètres et description Type Défaut
1

rotateEffect

Il active l'effet de rotation 3D dans le sélecteur.

 booléen faux
2

momentumRatio

Lorsque vous relâchez le sélecteur après un toucher et un mouvement rapides, cela produit plus d'élan.

 nombre sept
3

updateValuesOnMomentum

Utilisé pour mettre à jour les sélecteurs et saisir les valeurs pendant l'élan.

 booléen faux
4

updateValuesOnTouchmove

Utilisé pour mettre à jour les sélecteurs et saisir les valeurs pendant le déplacement tactile.

 booléen vrai
5

value

Le tableau a ses valeurs initiales et chaque élément du tableau représente la valeur de la colonne associée.

 tableau -
6

formatValue

La fonction est utilisée pour formater la valeur d'entrée et elle doit renvoyer une nouvelle valeur de chaîne formatée. Les valeurs et displayValues sont un tableau de colonnes associées.

 function (p, valeurs, displayValues) -
sept

cols

Chaque élément du tableau représente un objet avec des paramètres de colonne.

 tableau -

Rappels de paramètres de sélecteur

Le tableau suivant présente les listes des fonctions de rappel disponibles dans les sélecteurs -

S.Non Rappels et description Type Défaut
1

onChange

La fonction de rappel sera exécutée chaque fois que la valeur du sélecteur a changé et les valeurs et displayValues sont des tableaux de colonnes associées.

 function (p, valeurs, displayValues) -
2

onOpen

La fonction de rappel sera exécutée chaque fois que le sélecteur est ouvert.

 fonction (p) -
3

onClose

La fonction de rappel sera exécutée chaque fois que le sélecteur est fermé.

 fonction (p) -

Paramètres de colonne

Au moment de la configuration de Picker, nous devons passer le paramètre cols . Il est représenté sous forme de tableau, où chaque élément est un objet avec des paramètres de colonne -

S.Non Paramètres et description Type Défaut
1

values

Vous pouvez spécifier les valeurs des colonnes de chaîne avec un tableau.

 tableau -
2

displayValues

Il a un tableau avec des valeurs de colonnes de chaîne et il affichera la valeur du paramètre values , lorsqu'il n'est pas spécifié.

 tableau -
3

cssClass

Le nom de classe CSS utilisé pour définir sur le conteneur HTML de la colonne.

 chaîne -
4

textAlign

Il est utilisé pour définir l'alignement du texte des valeurs de colonne et il peut être «gauche», «centre» ou «droite» .

 chaîne -
5

width

La largeur est calculée automatiquement, par défaut. Si vous avez besoin de corriger les largeurs de colonne dans le sélecteur avec des colonnes dépendantes qui doivent être en px .

 nombre -
6

divider

Il est utilisé pour la colonne qui doit être un diviseur visuel, il n'a aucune valeur.

 booléen faux
sept

content

Il est utilisé pour spécifier la colonne de séparation (diviseur: vrai) avec le contenu de la colonne.

 chaîne -

Paramètre des rappels de colonne

S.Non Rappels et description Type Défaut
1

onChange

Chaque fois que la valeur de la colonne changera, la fonction de rappel s'exécutera. La valeur et displayValue représentent la valeur actuelle de la colonne et displayValue .

 function (p, value, displayValue) -

Propriétés du sélecteur

La variable Picker a de nombreuses propriétés qui sont données dans le tableau suivant -

S.Non Propriétés et description
1

myPicker.params

Vous pouvez initialiser les paramètres passés avec object.
2

myPicker.value

La valeur sélectionnée pour chaque colonne est représentée par un tableau d'éléments.
3

myPicker.displayValue

La valeur d'affichage sélectionnée pour chaque colonne est représentée par un tableau d'éléments.
4

myPicker.opened

Lorsque le sélecteur est ouvert, il prend la valeur vraie .
5

myPicker.inline

Lorsque le sélecteur est en ligne, il prend la valeur vraie .
6

myPicker.cols

Les colonnes Picker ont leurs propres méthodes et propriétés.
sept

myPicker.container

L'instance Dom7 est utilisée pour le conteneur HTML.

Méthodes de sélection

La variable de sélection a des méthodes utiles, qui sont données dans le tableau suivant -

S.Non Méthodes et description
1

myPicker.setValue(values, duration)

Utilisez pour définir une nouvelle valeur de sélecteur. Les valeurs sont dans un tableau où chaque élément représente la valeur de chaque colonne. duration - C'est la durée de transition en ms.
2

myPicker.open()

Utilisez pour ouvrir Picker.
3

myPicker.close()

Utilisez pour fermer Picker.
4

myPicker.destroy()

Utilisez pour détruire l'instance de Picker et supprimer tous les événements.

Propriétés de la colonne

Chaque colonne du tableau myPicker.cols a également ses propres propriétés utiles, qui sont données dans le tableau suivant -

//Get first column
var col = myPicker.cols[0];
S.Non Propriétés et description
1

col.container

Vous pouvez créer une instance avec un conteneur HTML de colonne.
2

col.items

Vous pouvez créer une instance avec des éléments HTML d'éléments de colonne.
3

col.value

Utilisé pour sélectionner la valeur actuelle de la colonne.
4

col.displayValue

Utilisé pour sélectionner la valeur actuelle de la colonne d'affichage.
5

col.activeIndex

Indiquez le numéro d'index actuel, qui est l'élément sélectionné / actif.

Méthodes de colonne

Les méthodes de colonne utiles sont données dans le tableau suivant -

S.Non Méthodes et description
1

col.setValue(value, duration)

Utilisé pour définir une nouvelle valeur pour la colonne actuelle. La valeur doit être une nouvelle valeur et la durée est la durée de transition exprimée en ms.
2

col.replaceValues(values, displayValues)

Utilisé pour remplacer les valeurs de colonne et displayValues ​​par de nouvelles.

Il est utilisé pour accéder à l'instance de Picker à partir de son conteneur HTML, chaque fois que vous initialisez Picker en tant que Picker en ligne.

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

Il existe différents types de sélecteurs tels que spécifiés dans le tableau suivant -

S.Non Types d'onglets et description
1 Sélecteur à valeur unique

C'est un composant puissant qui vous permet de choisir toutes les valeurs de la liste.
2 Deux valeurs et effet de rotation 3D

Dans le sélecteur, vous pouvez utiliser pour l'effet de rotation 3D.
3 Valeurs dépendantes

Les valeurs dépendent les unes des autres pour l'élément spécifié.
4 Barre d'outils personnalisée

Vous pouvez utiliser un ou plusieurs sélecteurs sur une seule page pour le personnaliser.
5 Sélecteur en ligne / Date-heure

Vous pouvez sélectionner le nombre de valeurs dans le sélecteur en ligne. Comme la date a la date, le mois, l'année et l'heure a les heures, minutes, secondes.