Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

segunda-feira, 21 de maio de 2007

Titulo Editável com Javascript

Eu queria ter postado ontem, porém por motivos de força maior, não pude fazê-lo.
Depois de ter enchido a tela de explicações sobre DOM, talvez não tenha elucidado uma maneira legal o uso de DOM, lembrei-me de um site o qual gosto NetVibes, lá tem várias coisa legais, mas uma me chamou a atenção, talvez pelo fato de aparentemente ser bem simples, mas isso não vem ao caso, pois bem, quando você entra no site, pode-se editar o título da página, estou falando dos dois títulos, da página e do browser, resolvi, então arregaçar as mangas e colocar o tico-teco para funcionar. O resultado, foi o seguinte:

<html>
<title>Título editável com JavaScript</title>

<!-- O css abaixo, é para o página não ficar extremamente tosca, só pra dar um estilozinho, qualquer dúvida vai no post CSS - Parte I -->
<style type="text/css">
#titulo {
font-size:36px;
font-face: "Comic Sans MS";
color:#400;
}
</style>
<script type="text/javascript">


//Quando carregar a página ele chama essa função

window.onload = function(){
function editartitulo(){


// A linha abaixo ele procura "um" elemento que tenha a id titulo, que no nosso caso o elemento é um span

var span = document.getElementById('titulo');
span.onmouseover = function(){


// ele chama essa função quando o mouse passa por cima dele (span).

this.style.background = '#000000';

// troca a cor de fundo.

this.title = "Clique"

// coloca uma tag, para o usuário saber onde clicar.

}
span.onmouseout = function(){


// Função executada quando o mouse sai de cima do span.

this.style.background = '';
}
span.onclick = function(){


// Função executado ao clicar do mouse (no span, é claro)

var texto = this.firstChild.nodeValue;

// Aqui começa a parte interessante, ele joga dentro da variável texto, o conteúdo do "primeiro filho", do span, que no caso é o texto contido nele, através da propriedade nodevalue.

var input = '<input type="text" value="'+texto+'">';

// Via código, como já disse antes, criamos um elemento input do tipo caixa de texto, por padrão é o conteúdo da variável texto.

this.innerHTML = input;

// inclui o input dentro do span

var cxtexto = this.firstChild;

// isso é uma forma que muita gente usa, inclusive eu, para não ficar chamando o elemento pelo "nome completo" (this.firstChild). como todo bom brasileiro, criamos apelidos para isso.

this.onclick = null;
this.onmouseover = null;
cxtexto.select();

// Isso é firula, é pra você não precisar selecionar tudo o que está dentro da caixa de texto, para depois digitar o que queira.

cxtexto.onblur = function(){

// Função executada quando a caixa de texto perde o foco.

this.parentNode.innerHTML = this.value;

//o pai da caixa de texto (no caso, o span), recebe o valor da caixa de texto.

document.title = this.value;

// O título do documento, recebe o valor da caixa de texto

editartitulo();


}

//Abaixo vai um plus do código, eu vi no site do O Básico da Web, é pra você poder, apertando a tecla enter, fazer a entrada do texto que você digitou. :)
// é bem simples, toda vez que você digitar algo, verifica-se qual é o código da tecla na tabela ASCII, se foi igual ao enter, código 13, a caixa de texto perde o foco.

cxtexto.onkeypress = function(e){

var keynum;
if(window.event) // IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.which;
if (keynum == 13) this.blur();
}
}
}
editartitulo();
}
</script>

</head>
<body>
<center><span id="titulo">Edite este título</span></center>

</body>
</html>


fuiii...

Marcadores: ,

0 Comentários:

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial