Barre alphabétique de recherche pour liste des membres
Page 1 sur 1•Partagez
- Splash
StaffAdmin - 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>');
}- Code:
position : 'top',
- 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'],
- 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>');
- 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>');
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 :
Pensez à
Si vous souhaitez apporter des modifications au script, consultez la section ci-dessous !
Voici une liste des modifications que vous pouvez apporter au script.
1. Postion
En haut du script, vous verrez cette variable :
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 :
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 :
Pour un thème sombre, remplacez la ligne précédente par celle-ci :
À bientôt
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 :
Pensez à
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 :
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 :
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 :
Pour un thème sombre, remplacez la ligne précédente par celle-ci :
:u1: |
- LilaCH
Membre
Merci beaucoup !
Sujets les plus actifs
Sujets les plus vus
Meilleurs posteurs
Mer 31 Jan 2024 - 13:03 par NIK SIURI
» » Réduire la hauteur des catégories
Mer 31 Jan 2024 - 12:59 par NIK SIURI
» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
Mer 31 Jan 2024 - 12:35 par NIK SIURI
» » Afficher les avatars en forme rectangulaire
Mer 31 Jan 2024 - 11:47 par NIK SIURI
» » Modifier la partie des stats en début de qeel
Mer 31 Jan 2024 - 11:45 par NIK SIURI
» » Mettre une image au qeel
Mer 31 Jan 2024 - 11:37 par NIK SIURI
» » Rendre l'image du header cliquable
Mer 31 Jan 2024 - 11:34 par NIK SIURI
» » Elargir le cadre de la boite de smileys
Mer 31 Jan 2024 - 11:33 par NIK SIURI
» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
Mer 31 Jan 2024 - 10:29 par NIK SIURI
» » Catégories rétractables sur l'index
Mer 31 Jan 2024 - 10:17 par NIK SIURI
» » [phpBB3] Catégories de différentes couleurs
Mer 31 Jan 2024 - 10:17 par NIK SIURI
» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
Mer 31 Jan 2024 - 10:07 par NIK SIURI
» » Centrer l'avatar, le pseudo & le rang dans les messages
Mer 31 Jan 2024 - 10:06 par NIK SIURI
» » Modifier l'icône "On-line"
Mar 23 Mai 2023 - 19:15 par Kionk
» » Insérer des boutons "Haut" & "Bas" de forum
Mar 23 Mai 2023 - 11:40 par Kionk