BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Limiter lignes affichées par Listbox
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Limiter lignes affichées par Listbox

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6513
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Limiter lignes affichées par Listbox
    Envoyé : 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


Edité par Hobby001 - 25 Feb 2018 à 16:10
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6513
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Feb 2018 à 14:42
Bravo à tous Thumbs Up
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.047 secondes.