As novidades do HTML5 foram tantas, que não seria viável colocarem-nas
todas e um post só, pois seria muita informação de uma vez, tornando-se difícil
a assimilação do conteúdo. Devido a isso continuarei dividindo a assunto em
pequenos posts.
Vejamos mais duas coisas que você certamente já fez mais de uma
vez e foram simplificadas pelo HTML5.
Detalhes e sumário
Veja um exemplo de uso dos novos elementos details e summary:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Exemplo details e summary</title>
</head>
<body>
<details>
<summary>Copiando <progress max="39248" value="14718"> 37,5%</summary>
<dl>
<dt>Tamanho total:</dt>
<dd>39.248KB</dd>
<dt>Transferido:</dt>
<dd>14.718</dd>
<dt>Taxa de transferência:</dt>
<dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd>
</dl>
</details>
</body>
</html>
Conteúdo editável
Para tornar um elemento do HTML editável, basta incluir nele o
atributo contenteditable, assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Videochat, step 1</title>
</head>
<body>
<div contenteditable="true">
Edite-me...
</div>
</body>
</html>
Drag and Drop
A API de Drag and Drop é relativamente simples. Basicamente,
inserir o atributo draggable="true" num elemento o torna arrastável. E há uma série de eventos que
você pode tratar. Os eventos do objeto sendo arrastado são:
Dragstart
|
Drag
|
Dragend
|
Dragenter
|
Dragleave
|
Dragover
|
Drop
|
O objeto começou a ser arrastado. O evento que a função recebe
tem um atributo target, que contém o objeto sendo
arrastado.
|
O objeto está sendo arrastado
|
A ação de arrastar terminou
O objeto sobre o qual outro é arrastado sofre os seguintes
eventos:
|
O objeto sendo arrastado entrou no objeto target
|
O objeto sendo arrastado deixou o objeto target
|
O objeto sendo arrastado se move sobre o objeto target
|
O objeto sendo arrastado foi solto sobre o objeto target
|
Detalhes importantes:
A ação padrão do evento dragover é cancelar a ação de dragging
atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de
dragover com, no mínimo, return false.
Seleções de texto são automaticamente arrastáveis, não precisam
do atributo draggable. E se você quiser
criar uma área para onde seleções de texto possam ser arrastadas, basta tratar
esses mesmos eventos.
Por fim, todas funções de tratamento de evento de drag recebem
um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de
drag.
<!DOCTYPE
HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 Drag
and drop Demonstração</title>
<style type="text/css">
#boxA, #boxB {
float:left;
width:100px; height:200px; padding:10px;
margin:10px; font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color:
green; }
#drag, #drag2, #drag3 {
width:50px;
padding:5px; margin:5px; border:3px
black solid; line-height:50px;
}
#drag { background-color:
red;text-align: center;}
#drag2 { background-color:
orange;text-align: center;}
#drag3 { background-color:
white;text-align: center;}
</style>
<script type="text/javascript">
// Quando o
usuario inicia um drag, guardamos no dataset do evento o id do objeto sendo
arrastado
function
dragStart(ev) {
ev.dataTransfer.setData("ID",
ev.target.getAttribute('id'));
}
// Quando o
usuario arrasta sobre um dos paineis, retornamos false para que o evento n䯠se
propague para o navegador, o
// que faria com que o contefosse
selecionado.
function dragOver(ev)
{ return false; }
// Quando
soltamos o elemento sobre um painel, movemos o elemento, lendo seu id do
dataset do evento
function dragDrop(ev)
{
var idelt =
ev.dataTransfer.getData("ID");
ev.target.appendChild(document.getElementById(idelt));
}
</script>
</head>
<body>
<!--
Painel 1 -->
<div id="boxA" ondrop="return
dragDrop(event)" ondragover="return dragOver(event)">
<!-- Draggable 1 -->
<div id="drag" draggable="true" ondragstart="return
dragStart(event)">
A
</div>
<!-- Draggable 2 -->
<div id="drag2" draggable="true" ondragstart="return
dragStart(event)">
B
</div>
<!-- Draggable 3 -->
<div id="drag3" draggable="true" ondragstart="return
dragStart(event)">
C
</div>
</div>
<!-- Painel 2 -->
<div id="boxB" ondrop="return
dragDrop(event)" ondragover="return dragOver(event)">
</div>
</body>
</html>
Revisão ortográfica e gramatical
Os agentes de usuário podem oferecer recursos de revisão
ortográfica e gramatical, dependendo do que houver disponível em cada plataforma.
Os desenvolvedores podem controlar o comportamento dessa ferramenta através do
atributo spellcheck.
Inserir spellcheck="true" num elemento faz com que a revisão esteja habilitada para ele.
Você também pode desabilitar a revisão para determinado elemento, inserindo spellcheck="false".
Para dar continuidade aos posts sobre HTML5, escolha um dos links abaixo:
- HTML5 Parte I - Doctype, Html, head, body
- HTML5 Parte II Atributo Type: tel, search, email, url, number, color
- HTML5 Parte III - Validadores: autofocos, placeholder, required, pattern etc.
- HTML5 Parte IV motores de Renderização, utilização de Modernizr e muito mais.
- HTML5 Parte V - details, summary, Drag and Drop e spellcheck
- HTML5 Parte VI - Audio, Video e Codec.
Impossível é uma palavra muito grande, que pessoas pequenas usam para te oprimir!...
(Chorão)
0 comentários:
Postar um comentário