Imprimer la Page | Fermez la fenêtre

[Tuto] Limiter lignes affichées par Listbox

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23247
Date: 19 Avr 2024 à 20:08
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: [Tuto] Limiter lignes affichées par Listbox
Posté par: Hobby001
Sujet: [Tuto] Limiter lignes affichées par Listbox
Posté le: 21 Feb 2018 à 16:48
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



Réponses:
Posté par: Hobby001
Posté le: 22 Feb 2018 à 14:22
Révision du tuto pour ajouter la méthode pour transférer le focus à un élément "Bouton de formulaire" telle que proposée par 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


Posté par: brolysan
Posté le: 22 Feb 2018 à 14:42
Bravo à tous Thumbs Up

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net