Framework7 - Sélection intelligente
La description
La sélection intelligente est un moyen simple de modifier les sélections de formulaire en pages dynamiques en utilisant des groupes de cases à cocher et d'entrées radio.
Nous pouvons utiliser la sélection intelligente dans différents types comme spécifié dans le tableau ci-dessous -
| S. Non | Type et description |
|---|---|
| 1 | Disposition Smart Select La disposition de sélection intelligente définit une vue de liste à l'intérieur de l' élément de sélection à l' aide de la classe de sélection intelligente . |
| 2 | Sélection intelligente avec barre de recherche La sélection intelligente recherche les éléments à l'aide de la barre de recherche et l'active en définissant la classe data-searchbar sur true. |
| 3 | Titre de page personnalisé et texte du lien arrière Vous pouvez définir le titre de page personnalisé et le lien arrière pour la sélection intelligente à l'aide des attributs data-page-title et data-back-text . |
| 4 | Ouvrir dans Popup La sélection intelligente peut être ouverte en tant que popup en utilisant l' attribut data-open-in pour popup . |
| 5 | Ouvrir dans le sélecteur La sélection intelligente peut être affichée en tant que sélecteur modal en définissant l' attribut d' ouverture de données sur sélecteur . |
| 6 | Icônes, couleurs et images personnalisées Vous pouvez définir une icône, une couleur ou une image personnalisée sur la sélection intelligente en utilisant respectivement les attributs data-option-icon , data-option-color et data-option-image . |
| sept | Sélection multiple et Optgroup La sélection intelligente permet d'utiliser plusieurs options de sélection et de groupe en utilisant les attributs multiples et optgroup . |
| 8 | Sélection multiple et longueur maximale La sélection intelligente permet de sélectionner des éléments en nombre limité en utilisant l' attribut maxlength . |
Vous pouvez avoir d'autres types de sélection intelligente, qui peuvent être utilisés dans différents scénarios, comme indiqué dans le tableau ci-dessous -
| S. Non | Type et description | Attribut |
|---|---|---|
| 1 | Close Smart Select On User Select Vous pouvez fermer la sélection intelligente lorsque l'utilisateur sélectionne une option. |
data-back-on-select = "vrai" |
| 2 | Smart Select With Virtual List La liste virtuelle peut être utilisée avec la sélection intelligente si vous avez beaucoup d'options. |
data-virtual-list = "vrai" |
| 3 | Smart Select Color Themes Vous pouvez spécifier les thèmes de couleur pour le formulaire et la barre de navigation sur la page de sélection intelligente. |
data-form-theme = "couleur" data-navbar-theme = "couleur" |
| 4 | Set Smart Select Value By Option Text La valeur de la sélection intelligente peut être définie à l'aide de la valeur d'option. |
valeur de sélection intelligente |
| 5 | Open Smart Select Using JavaScript Vous pouvez ouvrir la sélection intelligente à l'aide de la méthode JavaScript. |
myApp.smartSelectOpen (smartSelect)
|
| 6 | Adding Options Dynamically Vous pouvez ajouter des options de manière dynamique à la sélection intelligente, même si elles sont déjà ouvertes. |
myApp.smartSelectAddOption (sélectionner, optionHTML, index)
|