Skip to content

Zepto 0.8
Compare
Choose a tag to compare
@mislav mislav released this 13 Jul 11:09
· 844 commits to main since this release
v0.8
984dcfe

Changes in Zepto since v0.7

Most notable additions in Zepto 0.8 are:

  1. CSS transitions for every browser with animate() method;
  2. Unified event handling with fn.on() & off();
  3. Ajax global events, timeout support, and other improvements;
  4. Performance boost for selectors;
  5. 2 new add-ons.

Zepto is now expected to work in all major browsers, mobile or desktop, except IE. Full summary of most notable additions/fixes below.

Download Zepto 0.8. Report bugs here. Thank you Zepto contributors!

Two new add-ons

  • "data.js": expand the $.fn.data() method to store any kind of objects, not just scalar values
  • "fx_methods.js": animated show(), hide(), fadeIn/Out methods
// examples
$('#el').show('slow')
$('#el').hide(150)
$('#el').fadeIn('fast')

To build a custom "zepto.js" distribution file including add-ons you'd like, you can clone the project and use the rake concat tool:

$ rake concat[data:fx_methods]
Building zepto.js by including: polyfill, zepto, event, detect, fx, ajax, form, touch, data, fx_methods

Event

  • unified event handling with fn.on() & off()
  • event methods now accept objects in which keys are event names and values are handler functions
  • fix delegate(), one() handlers receiving multiple data arguments
  • fix return false cancels event even in delegated handlers
// example: observe the following events for forms matching selector
$(document).on({
  click: function(e) { ... },
  submit: function(e) { ... }
}, 'form.add_comment')

Ajax

  • enable cross-domain Ajax requests
  • add "global" Ajax events as well as an extra "ajaxBeforeSend" event
  • add "context" option to $.ajax
  • ensure $.get(), $.post(), $.getJSON() all return xhr objects
  • add abort() functionality for $.ajaxJSONP
  • don't choke on JSON requests that return an empty body
  • allow to specify xhr transport
  • allow to set timeout for ajax request (closes #209)
  • correctly call "error" callback for Ajax requests failed due to connectivity issues
$(document)
  .on('ajaxStart', function() { /* display a progress indicator */ })
  .on('ajaxStop',  function() { /* hide the progress indicator */ })
  .on('ajaxSuccess', 'form.add_comment', function() {
    // hide the comment form when submitted
    $(this).hide()
  })

var form = $('#myform')

$.ajax({
  url: '/create',
  data: form.serializeArray(),
  context: form,
  timeout: 2500,
  error: function(xhr, errorType) { console.error(errorType) }
})

CSS animations for all

  • $.fn.anim() is now $.fn.animate(); duration is now specified in milliseconds
  • enable CSS animations in Firefox, Opera (and IE, theoretically, but Zepto still doesn't support IE)
  • turn off animations globally with $.fx.off = true
  • Added ability to run keyframe animations
  • fix animation callback being executed in the context of element
$('#el').animate({
  translate3d: '100px, 100px, 100px',
  rotateZ: '-90deg',
  opacity: 0.8,
  'background-color': '#BADA55'
}, {
  duration: 1800,
  easing: 'ease-out',
  complete: function() { /* ... */ }
});

Form

  • improve form serialization
  • val(value) now accepts a function argument
  • refactor attr() to support empty attributes and more input field types
  • refactor $.param() so it also accepts data from serializeArray()

Core

  • improve $(document).ready(), pass Zepto as 1st argument to handlers
  • performance boost for $.qsa(), Zepto's main query function
  • make first() & last() useful for non-DOM collections

DOM

  • fix <script> eval
  • support insertion of CharacterData nodes
  • replaceWith, wrap, before, after: make all of them noop on fragments
  • improve $.fn.width() & height() to work on window & document objects
  • add $.fn.insertBefore() & insertAfter()
  • trim whitespace from html fragment when using $("...") to create an element
Assets 2
Loading