Zepto.js v0.8 release notes

releasenotes.md

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