XSystemX
Usuário XPZ
Pessoal encontrei um tutorial muito interessante de como criar tags e atributos personalizados.
O HTML é uma linguagem de marcação de texto onde suas tags e atributos já vem com funcionalidades pré-definidas. Cada tag tem uma funcionalidade, e cada atributo também.
Neste tutorial vou mostrar como criar tags e atributos para o HTML, e também como adicionar funcionalidades a essas tags e atributos utilizando JavaScript.
Para começar vou criar uma tag chamada anchor, que vai se equivalente a tag a que já existe no HTML. Também vou criar dois atributos para essa tag: address (endereço), que vai ser equivalente ao atributo href da tag a; e place (lugar), que vai ser equivalente ao atributo target da tag a.
<anchor address='http://websnoolp.com' place='_blank'>WebSnoolp</anchor>Agora que a tag anchor e seus atributos foram criados, vou aplicar algum estilo nesta tag para que ela fique de fato parecida com um link.
anchor {
color: blue;
text-decoration: underline;
cursor: pointer;
}Com a tag já criada e os estilos já aplicados, só falta adicionar funcionalidades a esta tag e isso vai ser feito utilizando o JavaScript e com o código que você pode ver logo abaixo.
window.onload = function() {
var anchor = document.getElementsByTagName("anchor")[0];
anchor.onclick = function() {
var target = this.getAttribute('place') || '_self';
window.open(this.getAttribute('address'), target);
localStorage.color = '#551A8B';
};
if (localStorage.color) {
anchor.style.color = localStorage.color;
}
anchor.onmousedown = function() {
this.style.color = 'red';
document.onmouseup = function() {
anchor.style.color = localStorage.color ? localStorage.color : 'blue';
}
};
anchor.onmouseup = function() {
this.style.color = localStorage.color ? localStorage.color : 'blue';
};
};Como esse código acima, a tag anchor está fazendo a mesma coisa que a tag a, que é nativa do HTML, faz. Para isso ela está recebendo o estilo por parte do css, e as funcionalidades por parte do JavaScript. Outra coisa, as tags nativas do html, recebem estilos e funcionalidades por parte do css e do javascript; da mesma forma que acontece com a tag anchor, pois as tags e os atributos são só marcações de texto.
Créditos:
Autor original: Adriano Oliveira ()
O HTML é uma linguagem de marcação de texto onde suas tags e atributos já vem com funcionalidades pré-definidas. Cada tag tem uma funcionalidade, e cada atributo também.
Neste tutorial vou mostrar como criar tags e atributos para o HTML, e também como adicionar funcionalidades a essas tags e atributos utilizando JavaScript.
Para começar vou criar uma tag chamada anchor, que vai se equivalente a tag a que já existe no HTML. Também vou criar dois atributos para essa tag: address (endereço), que vai ser equivalente ao atributo href da tag a; e place (lugar), que vai ser equivalente ao atributo target da tag a.
<anchor address='http://websnoolp.com' place='_blank'>WebSnoolp</anchor>Agora que a tag anchor e seus atributos foram criados, vou aplicar algum estilo nesta tag para que ela fique de fato parecida com um link.
anchor {
color: blue;
text-decoration: underline;
cursor: pointer;
}Com a tag já criada e os estilos já aplicados, só falta adicionar funcionalidades a esta tag e isso vai ser feito utilizando o JavaScript e com o código que você pode ver logo abaixo.
window.onload = function() {
var anchor = document.getElementsByTagName("anchor")[0];
anchor.onclick = function() {
var target = this.getAttribute('place') || '_self';
window.open(this.getAttribute('address'), target);
localStorage.color = '#551A8B';
};
if (localStorage.color) {
anchor.style.color = localStorage.color;
}
anchor.onmousedown = function() {
this.style.color = 'red';
document.onmouseup = function() {
anchor.style.color = localStorage.color ? localStorage.color : 'blue';
}
};
anchor.onmouseup = function() {
this.style.color = localStorage.color ? localStorage.color : 'blue';
};
};Como esse código acima, a tag anchor está fazendo a mesma coisa que a tag a, que é nativa do HTML, faz. Para isso ela está recebendo o estilo por parte do css, e as funcionalidades por parte do JavaScript. Outra coisa, as tags nativas do html, recebem estilos e funcionalidades por parte do css e do javascript; da mesma forma que acontece com a tag anchor, pois as tags e os atributos são só marcações de texto.
Créditos:
Autor original: Adriano Oliveira ()