Titulo Editável
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();
//recursividade, em outro post eu explico isso
}
//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>
ps: Não seria necessário colocar o código no javascript para o onmouseover e onmouseout para trocar a cor de fundo do span, bastaria colocar hover no css, mas o nosso excelentissímo IEca não aceita.
Como diria a minha vovózinha, mamão-com-açúcar. Só mais uma coisa, como deve ter percebido, usa-se muito a variável this, e eu não comentei sobre o uso dela, é que isso já é um assunto, para os próximos posts.
ps: Eu não coloquei no título para não assustar, mas isso é um exemplo de DHTML.
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();
//recursividade, em outro post eu explico isso
}
//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>
ps: Não seria necessário colocar o código no javascript para o onmouseover e onmouseout para trocar a cor de fundo do span, bastaria colocar hover no css, mas o nosso excelentissímo IEca não aceita.
Como diria a minha vovózinha, mamão-com-açúcar. Só mais uma coisa, como deve ter percebido, usa-se muito a variável this, e eu não comentei sobre o uso dela, é que isso já é um assunto, para os próximos posts.
ps: Eu não coloquei no título para não assustar, mas isso é um exemplo de DHTML.
fuiii...
Marcadores: DOM, JavaScript
postado por ramon | 11:07
0 Comentários:
Postar um comentário
Assinar Postar comentários [Atom]
<< Página inicial