[TUTORIAL]Clicar em abas para mostrar as Categorias
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL]Clicar em abas para mostrar as Categorias
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
Clicar em abas para mostrar as Categorias
1º - 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... Módulos HTML&JAVASCRIPT 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. |
- 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);
}
});
2º - Código CSS
Agora que o código JavaScript foi adicionado, precisaremos de um CSS complementar, para que seja dado uma personalização.
Painel... Visualização Imagens e Cores Cores 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;
}
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 |
Tópicos semelhantes
» [TUTORIAL] Clicar em abas para mostrar as Categorias
» [TUTORIAL] Mostrar título completo dos tópicos nas categorias
» [TUTORIAL] Mostrar todas as letras em minusculas nos nomes de usuários
» [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
» [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
» [TUTORIAL] Mostrar título completo dos tópicos nas categorias
» [TUTORIAL] Mostrar todas as letras em minusculas nos nomes de usuários
» [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
» [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|