O site é em Ingles então tive que traduzir. Espero que entendam.
Eu gosto Crazy Egg s tabela de preços "em seu Preços e Inscrição página. Quando você clica em "Sign Up" para uma opção, o plano da coluna que destaca, os planos de outros desaparecem, e um formulário de inscrição tem o seu lugar. Há uma série de coisas impressionantes acontecendo dentro desta pequena área. Eu queria tentar e recriar o comportamento passo a passo, e compartilhar o poder de combinar CSS, JavaScript e imagens de forma inteligente.
Se você acabou de clicar sobre a procurar no site Crazy Egg, em seguida, clicar novamente, considere visitar lá de novo quando você terminar de ler este tutorial. Se você está tão impressionado com a maneira como o site é reunir, como eu, você ou alguém que você conhece / trabalhar, provavelmente poderia beneficiar clique incrível Crazy Egg de rastreamento ferramentas de visualização. Seus preços se tornam mais fácil para começar, então vamos dar uma consideração quando você está dando-lhes o tráfego.
Para aqueles que gostam de saltar à frente: ver o exemplo final , ou baixar um zip com todo o html, CSS, JavaScript e suporte imagens usadas neste artigo.
Primeiros passos
Primeiro eu preciso de uma mesa, e eu vou modelo meu exemplo fora do Crazy Egg. Vou usar uma coluna à esquerda para as descrições, uma fileira de cima para títulos, e uma matriz de funções no organismo. Nós vamos fazer uso de
thead , tfoot e tbody . tbody. <table>
<thead>
<tr>
<th>'s go here
<tr>
</thead>
<tfoot>
<tr>
<td>'s go here
</tr>
</tfoot>
<tbody>
<tr>
<td>'s go here
</tr>
</tbody>
</table>Próximo passo: Adicionar classe
Por padrão, todas as células da tabela são parecidos. Para estabelecer que as células em cada coluna estão relacionadas, eu preciso adicionar a todas as classes
<td> e <th> tags.
<table> <thead> <tr> <th class="desc"> <th class="choiceA"> <th class="choiceB"> ... <tr> </thead> <tfoot> <tr> <td class="desc"> <td class="choiceA"> <td class="choiceB"> </tr> </tfoot> <tbody> <tr> <td class="desc"> <td class="choiceA"> <td class="choiceB"> </tr> </tbody> </table>
Veja um exemplo 2, adição de classe , que também mostra a caixa de seleção acrescentou. Aqui está uma imagem.
Próximo Passo: Estabelecer o que é um estado selecionado parece
Gostaríamos de indicar uma coluna selecionada, acrescentando
class = "on" com as células adequadas. Uma vez que todas as células já tem um nome de classe atribuída, o sobre nome da classe será adicionado o valor do atributo de classe com um espaço.<table>
...
<tbody>
...
<tr>
<td class="desc">
<td class="choiceA on">
<td class="choiceB">
</tr>
...
</tbody>
</table>Veja um exemplo 3, o estado selecionado .
Próximo passo: Ligar colunas selecionadas com JavaScript
Quando alguém bate no botão "Escolher" em uma determinada coluna, queremos que a coluna inteira para assumir o estado selecionado. Precisamos de um JavaScript para isso.
Em Inglês, aqui está o que queremos que aconteça:
- Quando alguém clica em "Escolher" para a escolha A
- retire o nome da classe do "on" de todas as outras células
- em seguida, tomar todas as células com a classe para a escolha A
- e acrescentar "sobre" a ele.
Aqui estão as ferramentas necessárias para fazer isso:
- A função javascript getElementsByClassName chamado, o que nos permite alvo elementos com base em seu valor de classe. (Estou usando um escrito por Robert Nyman )
- A função javascript chamada addClassName (também através de Robert Nyman , embora o que eu estou usando ele não colocou em seu site ainda. Esta função será usado para adicionar "on" como um nome de classe para as colunas selecionadas.
- A função javascript chamada removeClassName, que é usado para desmarcar as células, removendo o "sobre" o valor de seus atributos de classe (através de Robert Nyman )
- Uma função JavaScript personalizado para amarrar o comportamento do conjunto.
Anexar a função personalizada para o evento onclick a "Escolha" link:
<tfoot>
<tr>
...
<td class="choiceA">
<a href="#" onclick="activateThisColumn('choiceA');return false;">
Choose
</a>
</td>
<td class="choiceB">
<a href="#" onclick="activateThisColumn('choiceB');return false;">
Choose
</a>
</td>
...
</tr>
</tfoot>
...Próximo passo: Introdução Imagens
Se fôssemos apenas mudando as cores de fundo, ele não teria quase o mesmo frescor como a tabela Egg Crazy, cuja coluna selecionada parece pular para fora, ou estender além dos limites da tabela.
É óbvio que uma imagem de fundo é usado com a célula selecionada tabela de cabeçalho. O que não é óbvio é que as células de cabeçalho da tabela vizinhos também estão usando imagens de fundo, que tem uma cor sólida no fundo, e branco na parte superior. Isto é evidente quando ligar o celular apresenta Web usando Firefox Developer Toolbar:
Vou fazer algumas imagens que realizar a mesma coisa. Aqui estão as imagens que vou usar:
| regular <th> |  | |
| selected <th> |  | |
| left column <th> |  | |
regular <td> |  | |
| selected <td> |  | |
| left column <td> |  | |
regular <td> in tfoot |  | |
| selected <td> in tfoot |  | |
left side <td> in tfoot |  | |
| choose button |  |
Veja o exemplo 5, imagens e dimensões de células no lugar .
Olhando bem - nós agora temos uma tabela com aparência decente com um comportamento dinâmico.
Olhando bem - nós agora temos uma tabela com aparência decente com um comportamento dinâmico.
Mas não podemos parar. Vamos introduzir ainda mais o comportamento dinâmico.
Próximo passo: Exibindo um formulário, escondendo algumas colunas da tabela.
Em Crazy Egg, quando uma coluna é selecionada, todas as outras colunas desaparecem, os movimentos da coluna selecionada para a esquerda, e um formulário é exibido no espaço à direita. O botão de cancelamento do formulário, em seguida, reshows todas as outras colunas escondidas anteriormente.
Primeiro, vou chamar o formulário que vai existir fora da tabela.
Então devemos estilo o formulário para assumir as dimensões exatas das quatro colunas selecionadas.
O formulário terá de ser absolutamente posicionado sobre a mesa. Então, vamos introduzir um elemento de recipiente ao formulário ea tabela para ser nosso pai, parente posicionado.
<div id="prices">
<div id="formcontainer">
...
</div>
<table id="pricetable">
...
</table>
</div>Ooops! O formulário não deve mostrar por padrão, e precisamos ter todas as outras células, exceto as células da coluna selecionada e células na coluna da esquerda agora. Nós vamos fazer uso de uma nova função,
hasclass , que verifica a class = "lado". Vamos modificar nossa função JavaScript "activateThisColumn" para ocultar e mostrar apenas as células apropriadas.function activateThisColumn(column) {
var table = document.getElementById('pricetable');
var form = document.getElementById('formcontainer');
// first, remove the 'on' class from all other th's
var ths = table.getElementsByTagName('th');
for (var g=0; g<ths.length; g++) {
removeClassName(ths[g], 'on');
if (!hasclass(ths[g],'side')) {
ths[g].style.display = 'none';
}
}
// then, remove the 'on' class from all other td's
var tds = table.getElementsByTagName('td');
for (var m=0; m<tds.length; m++) {
removeClassName(tds[m], 'on');
if (!hasclass(tds[m],'side')) {
tds[m].style.display = 'none';
}
}
// now, add the class 'on' to the selected th
var newths = getElementsByClassName(column, 'th', table);
for (var h=0; h<newths.length; h++) {
addClassName(newths[h], 'on');
newths[h].style.display = '';
// not all browsers like display = 'block' for cells
}
// and finally, add the class 'on' to the selected td
var newtds = getElementsByClassName(column, 'td', table);
for (var i=0; i<newtds.length; i++) {
addClassName(newtds[i], 'on');
newtds[i].style.display = '';
// not all browsers like display = 'block' for cells
}
// show the form!
form.style.display = 'block';
}
Mas ainda precisamos de esconder a forma e manter a nossa coluna selecionada quando o formulário é cancelado. Vamos adicionar uma função ao evento onclick do botão de cancelamento.
<input type="image" alt="Cancel" src="i/button_cancel.gif" onclick="hideTheForm();return false;" />
E a função diz:
function hideTheForm() {
// get the form
var form = document.getElementById('formcontainer');
// hide the form
form.style.display = 'none';
// now get the hidden table cells and show them again
var table = document.getElementById('pricetable');
var tds = table.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
tds[i].style.display = '';
}
var ths = table.getElementsByTagName('th');
for (var k=0; k<ths.length; k++) {
ths[k].style.display = '';
}
}Veja o exemplo 10, um formulário é revelado quando solicitados, e demitidos de vista quando cancelada .
Há mais coisas acontecendo com a forma Crazy Egg do que o que eu mencionei neste artigo. Principalmente, Crazy Egg invoca uma biblioteca JavaScript para animar a aparência do formulário ao invés de mudar de 'nenhuma' para 'block' e novamente isso sem rodeios. Essa etapa extra é além do escopo deste artigo, mas esse tipo de detalhe e de trabalho postas em forma dá uma indicação clara de que o pessoal da Crazy Egg realmente sabem o que estão fazendo. (Além disso, o IE tem alguns problemas para mostrar a minha forma, mas aqueles que poderiam ser facilmente superadas com comentários condicionais).
Espero que gostem do post, e ver o que alguns scripts embalados com imagens e CSS pode realizar em uma pequena quantidade de espaço.
Todo o html, CSS, JavaScript e imagens de apoio.
Baixar
Todo o html, CSS, JavaScript e imagens de apoio.
Baixar
0 comentários:
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.