Compteur de visites gratuit
CAForum infos
Derniers sujets
» » Les 30 ans du Web
Jeu 21 Fév 2019 - 12:27 par David1195

» » Supprimer le gras de certains pseudos
Jeu 21 Fév 2019 - 12:26 par David1195

» » [phpBB3] disparition de la liste des banissements
Jeu 21 Fév 2019 - 9:27 par Splash

» » Le coucou du jour (partie 2)
Mer 20 Fév 2019 - 16:22 par chrisnvidia

» » Ajouter le bouton de sélection de contenu
Lun 11 Fév 2019 - 12:42 par David1195

» » Personnaliser la navbar
Lun 11 Fév 2019 - 12:42 par David1195

» » Ajouter des polices supplémentaires à l'éditeur
Mar 5 Fév 2019 - 20:10 par chrisnvidia

» » Afficher/Masquer les catégories avec un effet
Mar 5 Fév 2019 - 20:07 par chrisnvidia

» » Maintenance Datacenter mardi 05 février 2019
Mar 5 Fév 2019 - 13:52 par David1195

» » Personnaliser la balise de soulignement
Dim 3 Fév 2019 - 10:20 par LilaCH

» » Un ptit délire
Dim 27 Jan 2019 - 21:35 par chrisnvidia

» » Masquer le bloc des modérateurs
Mar 22 Jan 2019 - 6:27 par Splash

» » Masquer le bloc "Modérateurs"
Lun 21 Jan 2019 - 21:35 par LilaCH

» » [Avis Administrateur] Intervention dans les templates
Lun 21 Jan 2019 - 13:34 par chrisnvidia

» » Barre alphabétique de recherche pour liste des membres
Lun 21 Jan 2019 - 10:22 par David1195

» » Icon Monstr
Lun 21 Jan 2019 - 10:14 par LilaCH

» » [Avis Administrateur] Comprendre le Qeel à l'intérieur du template
Lun 21 Jan 2019 - 10:13 par LilaCH

» » HTML Minifier
Dim 20 Jan 2019 - 12:19 par Splash

» » Centrer l'avatar, le pseudo & le rang dans les messages
Sam 19 Jan 2019 - 2:53 par chrisnvidia

» » Arrondir l'entête des catégorie
Mar 8 Jan 2019 - 12:56 par chrisnvidia

Barre alphabétique de recherche pour liste des membres

Voir le sujet précédent Voir le sujet suivant Aller en bas

Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Dim 20 Jan 2019 - 9:23

  • MP
  • Zoom
Hi,

Ce tuto est une adaptation en français de celui laissé par Ange tuteur ici : http://fmdesign.forumotion.com/t479-alphabetical-search-bar-for-the-memberlist

Caractéristiques
En cliquant sur une lettre vous trouverez tous les membres commençant par la lettre spécifiée *


* Il peut y avoir un bogue qui affiche un membre aléatoire si aucun membre ne commence par la lettre spécifiée



Direction le javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript


Mettre ce script sur toutes les pages :
Code:
if (/\/memberlist/.test(window.location.href)) {
  $(function() {
    window.fa_alphabar = {
      // position of the bar ; 'top', 'left', 'bottom', or 'right'
      position : 'top',
 
      presets : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
 
      bar : $('<div id="memberlist_alphabar" />')[0], // creates the preset bar
 
      list : $('form[action="/memberlist"]')[0].nextSibling, // memberlist
 
      // sort the memberlist by the letter that was chosen
      change : function(that) {
        if (that.id != 'alphabar_actif') {
          var actif = document.getElementById('alphabar_actif');
          if (actif) actif.id = '';
          that.id = 'alphabar_actif';
 
          $.get(that.href, function(d) {
            fa_alphabar.list.parentNode.innerHTML = $('form[action="/memberlist"]', d).parent().html();
            fa_alphabar.list = $('form[action="/memberlist"]')[0].nextSibling;
 
            if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
            fa_alphabar.insertBar();
          });
        }
      },
 
      // inserts the preset bar
      insertBar : function() {
        fa_alphabar.bar.className = 'alphabar_' + fa_alphabar.position;
        fa_alphabar.list.className += ' alphalist_' + fa_alphabar.position;
        fa_alphabar.list.parentNode.insertBefore(fa_alphabar.bar, fa_alphabar.position.toLowerCase() == 'bottom' ? fa_alphabar.list.nextSibling : fa_alphabar.list);
 
        /left|right/i.test(fa_alphabar.position) && fa_alphabar.list.insertAdjacentHTML('afterend', '<div class="clear"></div>');  // clear floats for left and right positions
      }
 
    };
 
    if (fa_alphabar.list) {
      // put together the alphabar
      for (var i = 0, j = fa_alphabar.presets.length, newRow = /left|right/i.test(fa_alphabar.position), htmlStr = '<table><tbody>' + (newRow ? '' : '<tr>'); i < j; i++) {
        htmlStr += (newRow ? '<tr>' : '') + '<td><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + fa_alphabar.presets[i] + '" ' + ( new RegExp('username=' + fa_alphabar.presets[i].replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(?:$|&)').test(window.location.search) ? 'id="alphabar_actif"' : '' ) + ' onclick="fa_alphabar.change(this); return false;">' + fa_alphabar.presets[i] + '</a></td>' + (newRow ? '</tr>' : '');
      }
 
      fa_alphabar.bar.innerHTML = htmlStr + (newRow ? '' : '</tr>') + '</tbody></table>';
 
      if (document.getElementById('ipbwrapper')) fa_alphabar.list = fa_alphabar.list.nextSibling;
      fa_alphabar.insertBar();
    }
  });
 
  document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');
}

Pensez à    Valider 2

Si vous souhaitez apporter des modifications au script, consultez la section ci-dessous !

Les modifications à apporter


Voici une liste des modifications que vous pouvez apporter au script.


1. Postion
En haut du script, vous verrez cette variable :
Code:
position : 'top',

Ceci détermine la position de la barre.
Actuellement affichée en haut de la liste des membres, si vous voulez qu'elle apparaisse à droite, à gauche ou en bas de la liste des membres, il vous suffit de changer les textes en haut à la position spécifiée.
'Right' - 'Left' - 'Bottom'

2. Presets
En haut de script, vous verrez également une variable nommée "presets" et un tableau de lettres. Par défaut, ce tableau contient l'alphabet.
Il es possible de le modifier ainsi :
Code:
presets : ['*','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],

Il a été ajouté au script  *, 1, 2, 3, 4, 5, 6, 7, 8, 9  à la liste des préréglages.

3. Le thème
Par défaut, le thème est blanc. Par conséquent, si vous souhaitez modifier les couleurs du thème, recherchez et modifiez la feuille de style en fin de script :
Code:
 document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#CCC;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#EEE}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');

Pour un thème sombre, remplacez la ligne précédente par celle-ci :
 
Code:
document.write('<style type="text/css">#memberlist_alphabar table{font-size:24px;line-height:30px;font-family:arial,sans-serif;text-align:center;background:#333;border-spacing:1px;margin:10px 0;width:100%}#memberlist_alphabar td{width:20px;background:#111}#memberlist_alphabar a{text-decoration:none!important}a#alphabar_actif{color:inherit}.alphabar_left,.alphabar_right{width:3%;margin:1%}.alphalist_left,.alphalist_right{clear:none;width:90%;margin:1%}.alphabar_left{float:left}.alphabar_right,.alphalist_left{float:right}.alphalist_right{float:left}</style>');


:u1:
À bientôt
Bye


† Aucune aide ne sera donnée en privé sur ce forum




Pour toutes questions avec un code ou une astuce, ouvrez une discussion
> ici <


Suivez le forum sur Facebook
LilaCH

LilaCH

Membre
Membre

MessageLilaCH le Lun 21 Jan 2019 - 10:09

  • MP
  • Zoom
Merci beaucoup !
David1195

David1195

StaffModo
StaffModo

MessageDavid1195 le Lun 21 Jan 2019 - 10:22

  • MP
  • Zoom
Merci beaucoup !


Modérateur du forum






Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum