- GabZTeste
- Mensagens : 11
Data de inscrição : 09/12/2015
[Arquivo] Como fazer o sistema de Abas
9/1/2017, 04:26
Estou arquivando este tópico que tive de suporte no Forumeiros para caso eles apaguem o tópico original:
Kyo Panda escreveu:Tópico original forumeiros: http://ajuda.forumeiros.com/t107640-sistema-de-abas-nos-topicos#753346
Seja bem-vinda ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber:
- Regras do Fórum, e o que você não deve fazer neste fórum.
- Os demais fóruns de Suporte Forumeiros
- Lista de Tutoriais e astúcias e Questões frequentes.
- Conheça a Staff do Fórum dos Fóruns.
- Conheça a função Busca.
Antes que esse tópico vá para o limbo por inatividade, gostaria de deixar uma solução:
Em Painel de controle > Geral > Mensagens e e-mails > Configurações > Mensagens, marque a opção Mostrar primeira mensagem do tópico em todas as páginas como Sim. Isso é necessário para o funcionamento do script abaixo.
Vá em Painel de controle > Módulos > HTML & JavaScript > Gestão dos códigos JavaScripts > Criar um novo JavaScript e adicione esse código com Investimento em Nos tópicos:
- Código:
/* global jQuery */
(function($) {
'use strict';
$(function() {
var $post = $('.postbody .content:first');
if (!$post.length) {
return;
}
var regex = /\[linked\](.*)\[\/linked\]/i;
var matches = $post.html().match(regex);
if (matches.length !== 2) {
return;
}
$post.html($post.html().replace(regex, ''));
var list = [];
$(matches[1]).filter('a').each(function(index, elem) {
list.push(['<li>', elem.outerHTML, '</li>'].join(''));
});
$('<ul id="fa-linked-topics"></li>')
.insertBefore($post.closest('.post'))
.append(list.join(''));
});
}(jQuery));
Vá em Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:
- Código:
#fa-linked-topics {
overflow: hidden;
}
#fa-linked-topics li {
float: left;
display: block;
margin-right: 10px;
}
#fa-linked-topics a {
display: table-cell;
height: 40px;
padding: 0 10px;
width: 60px;
text-align: center;
background-color: #333;
border-radius: 3px 3px 0 0;
vertical-align: middle;
}
Para utilizar o script, utilize o seguinte código na primeira mensagem de um tópico (remova os *):
[*linked]
[*url=http://exemplo.com.br/t1-link-para-o-primeiro-topico]Tópico 1[/url]
[*url=http://exemplo.com.br/t2-link-para-o-segundo-topico]Tópico 2[/url]
[*url=http://exemplo.com.br/t3-link-para-o-terceiro-topico]Tópico 3[/url]
[*/linked]
Mudando os links para os tópicos que deseja que fiquem na aba. Você deverá colocar o código em todos os tópicos que devem ficar "ligados".
O resultado:
- GabZTeste
- Mensagens : 11
Data de inscrição : 09/12/2015
Re: [Arquivo] Como fazer o sistema de Abas
15/5/2017, 16:16
Permissões neste sub-fórum
Não podes responder a tópicos
|
|