LF Design
Olá,

Seja bem vindo ao LF Design se registra no fórum estamos com muitas vagas e o melhor conteúdo para você

Até
LF Design
Últimos assuntos
» Mundo dos Fóruns
Sex Abr 18, 2014 7:17 am por JQuery

»  Arte Library®
Sex Mar 28, 2014 10:35 am por Wiliam.

» Poderia me fazer uma HTML Veja
Sab Maio 11, 2013 3:46 pm por Quakeline

» Star Forum - Mais que um forum, uma familia
Sab Maio 11, 2013 9:56 am por Quakeline

» Ultra Gaming
Qua Maio 08, 2013 8:03 pm por -Matt

» SUPERAntiSpyware
Qua Maio 08, 2013 7:25 pm por -Matt

» Como fazer isso
Qua Maio 01, 2013 12:28 pm por Quakeline

» [VIP] Compre VIP
Seg Abr 29, 2013 8:58 pm por Quakeline

Os membros mais ativos do mês


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

#1 [Tutorial] Minimizar e Maximizar categoria em Sab Abr 27, 2013 10:13 pm

Quakeline

avatar
Fundador


[Tutorial] Minimizar e Maximizar categoria

No tutorial abaixo estará aprendendo a como adicionar um Botão em um Efeito hover de quando passar o mouse sobre o titulo da categoria irá aprecer um Botão de "-" para Minimizar a Categoria e logo após terá o botão "+" para Maximizar


--> Tutoriais LF Design <--
[Tutorial] Minimizar e Maximizar categoria



- Inserindo o código JavaScript
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript

Depois você irá clicar em "Criar um novo JavaScript"



Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;

Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna do widget;

Código JavaScript - Neste campo deverá adicionar o código que vai ser disponibilizado abaixo

Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.


- Código
Código:
$(function(){$('.main-head:has(.page-title)').prepend('<a class="collapse tcatCollapse" id="collapse_c_cat1" href="#top" style="visibility:hidden;float: right;"><img src="http://i.imgur.com/fJz0Zls.png" alt=""></a>');$('.main-head:has(.page-title)').mouseover(function(){$(this).find('a.collapse[id]').css('visibility','visible')});$('.main-head:has(.page-title)').mouseout(function(){$(this).find('a.collapse[id]').css('visibility','hidden')});$('.main-head a.collapse[id]').click(function(e){e.preventDefault()});$('.main-head a.collapse[id]').attr('onclick'," if($(this).closest('.main-head').next('.main-content:first').css('display')=='none') {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','0',10,0); $(this).closest('.main-head').next('.main-content:first').slideDown(500);$(this).find('img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head');$(this).closest('.main-head').removeClass('collapsed')} else {my_setcookie($(this).closest('.main-head').find('.page-title').text()+'_ct','1',10,0); $(this).closest('.main-head').next('.main-content:first').slideUp(500);$(this).find('img').attr('src','http://i.imgur.com/gNAasKx.png'); $(this).closest('.main-head').addClass('collapsed');}");$(document).ready(function(){$('.main-head a.collapse[id]').closest('.main-head').each(function(){if(my_getcookie($(this).find('.page-title').text()+'_ct')=='1'){$(this).next('.main-content:first').css('display','none');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/gNAasKx.png');$(this).closest('.main-head').addClass('collapsed')}else{$(this).next('.main-content:first').css('display','block');$(this).find('a.collapse[id] img').attr('src','http://i.imgur.com/fJz0Zls.png');$(this).closest('.main-head').removeClass('collapsed')}})})});


- Resultado
  • Sem o Mouse em Cima


  • Com o Mouse em Cima



  • Posso alterar a Imagem de - e de + ??
    Sim poderá alterar mais recomendo que peça um suporte no fórum para que nós alteramos caso não saiba editar o código





© LF Design


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Tutorial] Minimizar e Maximizar categoria

#2 Re: [Tutorial] Minimizar e Maximizar categoria em Dom Abr 28, 2013 7:07 am

BabyLoves

avatar
Fundador
Tutorial Aprovado & Fechado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum