ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Hiperativo
Masculino
Idade : 16
PointActif's : 2525
ReputActifs : 59
Mensagens : 820
Inscrição : 02/06/2012

Localização : São Paulo - São Paulo - República Federativa do Brasil
100%
Ver perfil do usuáriohttp://master-publicitario.forumeiros.com/

[TUTORIAL]Clicar em abas para mostrar as Categorias

em Sex 5 Abr - 20:53


Clicar em abas para mostrar as Categorias

Um dos grandes segredos para atrair membros para fórum, são as personalizações que você adiciona nele. Neste tutorial, vamos aprender um efeito, que oculta suas Categorias, e só as mostra, quando você clica em Abas, que poderá personalizar no CSS!
O efeito deste tutorial está disponível apenas para PhpBB3


--> Tutoriais <--
Clicar em abas para mostrar as Categorias



- Adicionar o Código JavaScript
Para realizar o efeito desejado, necessitaremos de um JavaScript, que irá ocultar nossas categorias, e mostra-las quando clicarmos nas abas.
Aceda à Painel... Seta verde Módulos Seta verde HTML&JAVASCRIPT Seta verde Gestão dos códigos JavaScript
Clique em adicionar um novo código JavaScript.
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. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No Índice: O código será aplicado ao índice do fórum.
No Portal: O código será aplicado ao Portal do fórum.
Nos sub-fóruns(fóruns): O código será aplicado nos Fóruns e Sub-fóruns.
Nos tópicos (Sobre os temas): O código será aplicado aos tópicos do fórum.
Na Galeria: O código será aplicado na sua Galeria de imagens.
Em todas as páginas: O código será aplicado em todas as páginas do fórum.
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 investimento, marque em No Índice. E adicione o seguinte código:
Código:
function tttf(n) {
var tables = jQuery("#main-content .forabg")[n];
document.getElementById("ttid").innerHTML = "<div class='forabg'>" + tables.innerHTML + "</div>";
}
jQuery(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = jQuery(".forabg").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Clique nas abas acima e veja a categoria.</div>";
tf.parentNode.insertBefore(tl,tf);
}
});
Depois salve!


- Código CSS
Agora que o código JavaScript foi adicionado, precisaremos de um CSS complementar, para que seja dado uma personalização.
Painel... Seta verde Visualização Seta verde Imagens e Cores Seta verde Cores Seta verde Folha de Estilo CSS
Adicione o seguinte código:
Código:
#ttcl {
display: block;
list-style-type: none;
margin: 10px 0px 10px 0px;
}
#ttcl li {
display: inline;
padding: 5px;
margin: 0px 0px 0px 5px;
background: #FFFFFF;
border-radius: 5px;
}
#ttid {
display: block;
background: #FFFFFF;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
Se desejar, poderá personalizar o CSS apresentado acima, para que ele fique mais adequado a seu fórum.
Para isso, recomendamos que leia as FAQs que existem no Fórum de Suporte Oficial.


  • Resultado
    (Resultado após a aplicação) | (Categoria um aberta) | (Categoria dois aberta)





© ShiftActif & Gombor


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida]Clicar em abas para mostrar as Categorias
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum