[Tutorial] Visualizar membros do grupo em hover
Página 1 de 1 • Compartilhe
Autor: Angie Tuteur
Funcionalidade: Em todas as versões
Visualizar membros do grupo em hover |
As vezes gostaríamos de visualizar membros do grupo. Nesse tutorial iremos poder ver os membros do grupo em modo hover, sem necessidade de abrir a pagina do grupo.
--> Tutoriais, dicas e astúcias <--
Visualizar membros do grupo em hover
Visualizar membros do grupo em hover
1º - Paginas Javascript:
As 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 :seta2: Modulos :seta2: HTML & JavaScript :seta2: "Aba" Gestão dos códigos JavaScripts |
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 no indice. |
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. |
2º - Código a ser usado:
Coloque esse código no conteudo do javascript
- Código:
$(function() {
var max_users = 10,
lang = {
view_group : 'Veja o grupo completo',
loading : 'Carregando...',
view_err : 'Os dados do grupo não pode ser recuperado.'
},
links = $('a[href^="/g"]').filter(function() {
if (/\/g\d+-/.test(this.href)) {
return this;
}
}),
groupsinfo = {};
links.tooltipster && links.not('.tooltipstered').tooltipster({
animation : 'fade',
interactive : true,
contentAsHTML : true,
minWidth : 300,
maxWidth : 300,
delay : 500,
arrowColor : "#EEE",
autoClose : true,
content : lang.loading,
functionBefore : function(origin, continueTooltip) {
continueTooltip();
var groupURL = $(this).attr('href'),
groupId = groupURL.replace(/.*?\/g(\d+).*/, '$1'),
groupName = $(this).text();
if (origin.data('ajax') !== 'cached') {
if (groupsinfo[groupId] != undefined) {
origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
} else {
$.get(groupURL, function(d) {
var user = $('form[action="' + groupURL + '"] a[href^="/u"]', d),
i = 0,
li,
container = $('<div>'+
'<div class="fa_group_preview">'+
'<h2 class="fa_group_name">' + groupName + '</h2>'+
'<p class="fa_group_desc">' + $('form[action^="/g"]', d).find('dl:eq(1) dd, tr:eq(2) td.row2 .gen').text() + '</p>'+
'<ol class="fa_group_list"></ol>'+
'<div class="fa_group_button">'+
'<a href="' + groupURL + '" class="button1">' + lang.view_group + '</a>'+
'</div>'+
'</div>'+
'</div>');
for (; i < max_users; i++) {
if (user[i]) {
li = document.createElement('LI');
li.appendChild(user[i]);
$('ol', container).append(li);
}
}
if (!$('li', container).length) {
$('ol', container).after('<div>' + lang.view_err + '</div>');
}
groupsinfo[groupId] = container.html();
origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
});
}
}
}
});
$('head').append(
'<style type="text/css">'+
'.fa_group_preview { font-family:Arial; font-size:12px; color:#000; }'+
'.fa_group_preview a { text-decoration:none; }'+
'h2.fa_group_name { font-size:24px; }'+
'p.fa_group_desc, h2.fa_group_name { margin:10px 0 10px 0; }'+
'ol.fa_group_list { margin:0 25px; padding:0; }'+
'.fa_group_button { margin-top:10px; text-align:center; }'+
'</style>'
);
});
- Resultado:
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|