Front End

4 abr, 2013

Dicas para migrar do jQuery para Zepto.js

Publicidade

Muita gente acha que o Zepto.js é um framework Javascript voltado só para mobile. Muito pelo contrário! No seu início, sim, ele era voltado só para browsers webkit, mas após atualizações ele se tornou uma ótima alternativa ao jQuery, já que possui uma API compatível e aproximadamente 8kb.

O grande problema de adoção de Zepto.js no desktop é de que ele só funciona com browsers modernos, ou seja, esqueça o Internet Explorer. Abaixo você vê a listagem de browsers compatíveis:

  • Safari 5+ (desktop)
  • Chrome 5+ (desktop)
  • Mozilla Firefox 4+
  • iOS 4+ Safari
  • Android 2.2+ Browser
  • Outros browsers baseados em webkit
  • webOS 1.4.5+ Browser
  • BlackBerry Tablet OS 1.0.7+ Browser
  • Amazon Silk 1.0+
  • Opera 10+

Mas se você precisar dar suporte ao Internet Explorer, você pode fazer da seguinte forma, colocando como fallback o jQuery:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

Originalmente, nem todos os plugins de jQuery podem funcionar corretamente no Zepto, mesmo com a API compatível, algumas alterações devem ser feitas, portanto, vou deixar aqui uma listagem de plugins que encontrei que foram especificamente desenvolvidos para serem usados com o Zepto.js.

Zepto Carousel

zepto-carousel

Simples plugin de Carousel com suporte a swipe e css transtitions: Download.

Zepto Carousel Plugin

zepto-carousel-plugin

Carousel horizontal com loop infinito: Download.

Zepto-carousel.js

Zepto carousel para imagens: Download.

Bare Slideshow

Plugin básico para slideshow: Download.

SwipeSlide

swipeslide

 

Plugin de slides com navegação do tipo swipe: Download.

Flickable.js

flickable

Plugin para habilitar touch gestures em qualquer elemento HTML: Download.

Zepto Page Transitions

HTML5 Page Transitions similar ao jQuery Mobile: Download.

Zepto Mobile

zepto-mobile

Mobile framework baseado em Zepto e Backbone: Download.

Zepto Range

zepto-range

Input Range com Zepto: Download.

ZeptoSlider

Zepto Range plugin: Download.

jHERE

jhere

API para se trabalhar com mapas: Download.

Mobiscroll

mobiscroll

Date & Time Scroller plugin: Download.

zDatesPicker

iOS calendar para aplicações web: Download.

Zepto Cookie Plugin

Read, set, e delete cookies com Zepto: Download.

Zepto Toast-Message

toastmessage

Plugin para mostrar mensagens ao usuário: Download.

Zepto Data Binding

Plugin para Data Binding: Download.

Zepto CouchDB

Plugin para acessar CouchDB com Zepto: Download.

Zepto Reorient

Plugin Zepto para detecção de mobile orientation: Download.

Ekwal

ekwal

Plugin para equalizar largura ou altura com Zepto: Download.

Zepto ghostclick

Plugin para evitar ghostclicks em interfaces mobile: Download.

Zepto onPress

Fast buttons para web apps: Download.

Happy.js

happy-js (1)

Plugin para validação de formulários com Zepto: Download.

ZeptoScroll

Zepto window scroll plugin: Download.

CanJS Zepto Template

Plugin de Templates para Zepto: Download.

Zepto Template

Zepto Simple Template plugin: Download.

Zepto Accordion

Zepto Accordion Plugin: Download.

Zepto timeago

timeago

Zepto Plugin para update timestamps: Download.

litebox.js

Lightbox plugin para Zepto: Download.

CzBox2

Lightbox plugin para Zepto ou jQuery: Download.

bootstrap-datepicker.js

Datepicker para Twitter Bootstrap com Zepto ou jQuery: Download.

Zepto Autocomplete

Zepto Autocomplete plugin: Download.

ZeptoTextarea

Plugin para autogrowing de textareas: Download.

ZeptoShake

Plugin para device shake detection: Download.

Touch Input Increment

Increment/Decrement Zepto Plugin: Download.

Zepto Tooltip

tooltip

Responsive e Mobile-Friendly Tooltip: Download.

Fluid Carousel

Responsive Carousel com Zepto: Download.

Touchslider

iOS carousel/slider para jquery ou zepto: Download.

Zepto appear

Dispare eventos assim que o elemento estiver visível no viewport: Download.

Zepto Detect

Detect browser e devices features: Download.

Zepto Antiscroll

OSX Lion scrollbars cross-browser: Download.

Zepto pjax

pushState + ajax para zepto.js: Download.

Geolocator

Geolocation API plugin para jQuery ou Zepto: Download.

Drag and Drop

Drag and Drop Zepto plugin: Download.