Background Image
Table of Contents Table of Contents
Previous Page  61 / 68 Next Page
Information
Show Menu
Previous Page 61 / 68 Next Page
Page Background

61

REVISTA LOCAWEB

Sobre o autor

Homero Ottoni é programador e

sócio-proprietário da empresa Make

Media de desenvolvimento web.

LW

seguir, que foi inserido no código

anterior como exemplo.

$('#caixatexto').html("Olá

Mundo!!! :-)");

A DIV “caixatexto” recebe o

WH[WR Û2O£ 0XQGR Ü D SDUWLU

desse código simples.

Semelhanças

e diferenças

Por que usar Zepto, se

é como jQuery, tirando a

TXHVW¥R GR WDPDQKR" 3RUTXH D

velocidade acaba sendo maior

em dispositivos e navegadores

PRELOH 0DV K£ PDLV

O Zepto tem recursos

HVSHF¯íFRV SDUD PRELOH TXH

usam eventos e ações só

encontradas nesses dispositivos,

FRPR ÛWDSÜ ÛVLQJOH7DSÜ

ÛGRXEOH7DSÜ ÛORQJ7DSÜ ÛVZLSHÜ

etc.

O código a seguir demonstra

o uso de “tap”:

$('#home').tap(function() {

alert(“teste de TAP”);

});

Isso só vai funcionar em

GLVSRVLWLYRV WRXFK FRPR WDEOHWV H

VPDUWSKRQHV 3RGH YHU R FµGLJR

funcionando neste endereço:

KWWS PDNHPLGLD ORFDZHE FRPEU

]HSWR ]HSWRBWDS DVS

.

Este é um código para deletar

um elemento de uma lista com o

evento “tap”:

<script>

$('#items li').

swipe(function(){

$('.delete').hide()

$('.delete', this).show()

})

$('.delete').tap(function(){

$(this).parent('li').

remove()

})

</script>

2 FµGLJR +70/ FRP D

lista de itens para deletar com

7$* EU!

<ul id=items style="list-

style

-type:none; padding:20px ;spacing:20px"

>

<li>Item 1 <span

class="delete div_

css_b">DELETE</

span><br><br></li>

<li>Item 2 <span

class="delete div_

css_b">DELETE</

span><br><br></li>

<li>Item 3 <span

class="delete div_

css_b">DELETE</span></li>

</ul>

Ao clicar nos botões

'(/(7( R LWHP GD OLVWD « H[FOX¯GR

e a lista, atualizada.

Componentes criados

com o Zepto

Embora a base de

componentes baseados em

Zepto seja bem menor que

a do jQuery, tem aumentado

Exemplos e Referências

+£ DOJXQV OLQNV TXH SRGHP VHU ¼WHLV SDUD TXHP GHVHMD VH

aprofundar mais no assunto. Abaixo, duas páginas de exemplo. Uma

SDUD IXQ©·HV WRXFK FRPR ÛWDSÜ H XPD SDUD OHU GDGRV FRP -VRQ

KWWS PDNHPLGLD ORFDZHE FRPEU ]HSWR ]HSWRBWDS DVS

KWWS PDNHPLGLD ORFDZHE FRPEU ]HSWR ]HSWRBMVRQ DVS

$EDL[R GRLV OLQNV TXH SRGHP VHUYLU GH UHIHU¬QFLD

Zepto -

KWWS ]HSWRMV FRP

Json -

KWWS ZZZ MVRQ RUJ

[

O ZEPTO TEM RECURSOS ESPECÍFICOS PARA

MOBILE QUE USAM EVENTOS E AÇÕES SÓ

ENCONTRADAS NESSES DISPOSITIVOS

]

constantemente. Estes dois são

bem interessantes e servem

de base para compreender as

funções e ferramentas do Zepto.

Acesse os links:

KWWSV JLWKXE

FRP MFHPHU ]HSWR FDURXVHO

e

KWWSV JLWKXE FRP MFHPHU

]HSWR UDQJH

.

Botões são excluídos da lista ao clicar em Delete

Página Json.org:

endereço deve ser como

fonte de informações

sobre o Zepto