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:
<!-- 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 -->
//Quando carregar a página ele chama essa função
// A linha abaixo ele procura "um" elemento que tenha a id titulo, que no nosso caso o elemento é um span
// ele chama essa função quando o mouse passa por cima dele (span).
// troca a cor de fundo.
// coloca uma tag, para o usuário saber onde clicar.
// Função executada quando o mouse sai de cima do span.
// Função executado ao clicar do mouse (no span, é claro)
// 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.
// 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.
// inclui o input dentro do span
// 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.
// Isso é firula, é pra você não precisar selecionar tudo o que está dentro da caixa de texto, para depois digitar o que queira.
// Função executada quando a caixa de texto perde o foco.
//o pai da caixa de texto (no caso, o span), recebe o valor da caixa de texto.
// O título do documento, recebe o valor da caixa de texto
}
//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.
fuiii...
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: DOM, JavaScript
postado por ramon | 15:57
0 Comentários:
Postar um comentário
Assinar Postar comentários [Atom]
<< Página inicial