Objectif: Limiter le nombre de lignes affichées par l'élément Liste déroulante de OE
Il peut arriver que le nombre d'options proposées via une liste déroulante soit trop grand et que vous vouliez limiter l'affichage à un certain nombre d'options tout en pouvant dérouler la liste entière.
Étape 1
Ajouter un élément Liste déroulante et compléter la liste des valeurs à afficher
Étape 2
Ajouter une classe perso, disons ListBoxAction, à l'élément
Étape 3
Ajouter le code suivant dans un bloc de code de type javascript en position EndBody et suivez les instructions en commentaire.
// ce code permet de limiter l'affichage à 3 lignes $(".ListBoxAction select").focusin( function(){ var size = document.createAttribute("size");
size.value = "3"; // Nombre de lignes à afficher
var apply = $(this)[0].setAttributeNode(size);
} // Détection de la sélection d'une option et sortie immédiate. Il faut sortir de la liste déroulante pour qu'elle reprenne sa dimension initiale. Pour ce faire on transfère le focus sur un autre élément. $(".ListBoxAction select").change( function(){ // Entreprendre une action qui mènera à la perte de focus comme passer au prochain élément Champ de saisie de texte, à un élément Bouton de formulaire ou charger une nouvelle page.
// Méthode pour l'élément Champ de saisie de texte. // Notez que l'ID du Champ de saisie de texte peut être remplacée par une classe CSS personnalisée.
$("#WEidDuProchainÉlément input").focus();
// Méthode pour passer le focus à un Bouton de formulaire: // Premièrement ajouter une classe CSS personnalisée au bouton, disons "my-button" // Deuxièmement utiliser la syntaxe suivante $('.my-button button, .my-button input').focus();
// Note: à l'heure actuelle, il ne semble pas y avoir de solution pour l'élément Bouton Lien.
} // Sur sortie fermer la listbox $(".ListBoxAction select").blur( function(){ var test1 = $(this)[0].setAttribute("size",0);
} );
|
Révisions du tuto: 2018-02-21 Version originale du tuto Hobby001 2018-02-22 Ajout de la méthode pour Bouton de formulaire selon directives de Dmit OE
------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE
|