Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André Severino

Criar um termometro... ( Imagem de exemplo )

Por , em Desenvolvimento frontend

Recommended Posts

André Severino    3

André Severino
Postado

Bom dia pessoal, tive uma idéia aqui meio 'loca' e não faço a minima ideia de como fazer, quer dizer arrumei um 'meio' de fazer + acho que não é certo, queria que conforme o pessoal fosse passando as etapas do cadastro o termometro fosse aumentando gradativamente trocando de cor( no caso iria alterar a imagem, se todos os campos estivessem sido preenchidos ).

 

A forma de encontrei de fazer é criar o termometro já certo e em cada titulo de cada página já inserir o termometro real, ou seja, no titulo da página 3 vai ter o termometro3.jpg, na página 2 o termometro2.jpg e etc....

 

Página 01

pag1.gif

 

 

Página 02

pag2.gif

 

Se alguém conheçer algum tutorial, ou alguma coisa por onde devo começar, sugestões e etc... :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pessoalmente eu não vejo nenhum problema com essa forma com que você resolveu.

 

pq você não acha que está 'certo' ?

achou 'ruim', ter várias imagens?

 

só um baita posicionamento absoluto, e uma troca de background-position, me veio a cabeça.

vou mover para css.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Nossa, cara! Pra que jQuery pra isso?

 

Vai ser página a página ou dinâmico com Javascript??

 

De qualquer forma, você precisará de uma PNG mais ou menos como essa:

semttulo2vk.png

 

E montar a marcação mais ou menos assim:

<div id="termometro">
   <ul>
       <li>01</a>
       <li>02</a>
       <li>03</a>
       <li>04</a>
   </ul>
   <div class="medida"></div>
</div>

 

e o CSS

#termometro { background: #f00; position: relative; width: 228px; }
#termometro ul { background: url('termometro.png'); height: 38px; padding-left: 80px; }
#termometro li { float:left; line-height: 38px; list-style: none; text-align: center; width: 20% }
#termometro .medida { background: #0f0; bottom: 0; left: 0; position: absolute; top: 0; width: 0; z-index: -1; }

 

Para a variação página a página, basta definir um ID para a tag BODY baseado na página atual

<body id="cadastro-1">...
<body id="cadastro-2">
<body id="cadastro-3">

 

E fazer 'previsões' via CSS

#cadastro-1 .medida { width: 90px; }
#cadastro-2 .medida { width: 130px; }
#cadastro-3 .medida { width: 170px; }

 

Para o Javascript, basta a cada passo, modificar a largura da medida:

function mudaTermometro(passo){
   var el = document.getElementById('termometro').childNodes[1];
   switch(passo){
       case 1:
           el.style.width = '90px';
       case 2:
           el.style.width = '130px';
       case 3:
           el.style.width = '170px';
   }
}

 

Ta aí, mastigadinho. É só se preocupar com as medidas e em encaixar corretamente no leiaute.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Outra solução seria você criar uma div e uma span.

 

<div id="termometro"><span id="passo" class="primeiro"></span></div>

 

Na div #termometro você coloca o background todo termometro zerado, sem nenhum preenchimento de progresso (todo vermelho).

 

E na span #passo você pode colocar o background até o ultimo passo preenchido.

 

#termometro { background: url('termometro_vazio.jpg') no-repeat top left; height: 38px; width: 225px; }
#passo{ background: url('termometro_cheio.jpg') no-repeat top left; height: 38px; display: block; }
.primeiro { width: 50px;  }
.segundo  { width: 90px;  }
.terceiro { width: 130px; }
.quarto   { width: 170px; }
.quinto   { width: 225px; }

 

A idéia é que em #termometro tenha o background do termometro todo vazio.

 

E a span #passo que leva o background todo cheio estará com a largura inicial limitada em 50px.

 

Revelando somente o inicio da imagem.

 

E conforme for aumentando o width do #passo ele vai revelando mais o background do span, cobrindo o do #termometro.

 

Dando a sensação que o termometro está enchendo quando na verdade o vazio está sendo coberto pelo cheio.

 

Isso só mudando o valor da class do span.

 

1º Passo

<div id="termometro"><span id="passo" class="primeiro"></span></div>

 

2º Passo

<div id="termometro"><span id="passo" class="segundo"></span></div>

 

3º Passo

<div id="termometro"><span id="passo" class="terceiro"></span></div>

 

4º Passo

<div id="termometro"><span id="passo" class="quarto"></span></div>

 

5º Passo

<div id="termometro"><span id="passo" class="quinto"></span></div>

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito