Com este tutorial, ao procurar um membro na lista de membros do fórum, você perceberá que será mais fácil pois teremos como escolher por ordem alfabética a ordem dos nomes apresentados.
Procurar membros em ordem alfabética TUTORIAIS, DICAS E ASTÚCIAS |
Instalação do javascriptAs páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.
Painel de Controle Módulos HTML e Javascript Gestão das páginas Javascript Criar um novo javascript |
(clique na imagem para aumentar) | Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
| Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas. |
| Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery. |
| Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
Em seguida, basta adicionar este código:
- Código:
if (/\/memberlist/.test(window.location.href)) { 'DEVELOPED BY ANGE TUTEUR'; 'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR'; 'ORIGIN : http://fmdesign.forumotion.com/t479-alphabet-search-bar-for-the-memberlist#5995'; $(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>'); }
Logo após a aplicação, será possível visualizar o resultado.
|