Bastian Feder | Liip Ag

jQuery secrets

jQuery secrets

Bastian Federlapistano@php.net

IPC Spring 2011 Berlin31th May 2011

Me, myself & I

JavaScript since 2002

PHP since 2001

Opensource addict

PHP manual translations

FluentDOM

Utilities

Saving the state

jQuery.data(element, key[, value])

Store any kind of information on a DOM element

Circular references avoided

Low level function use $().data() instead.

Saving possible?

jQuery.acceptData( element )

Low level function invoked by $(elem).data()

Extend jQuery.noData to set additional constraints

Does not raise an error/exception

Removing the state

jQuery.removeData(element[, key])

Low level function use $().removeData([key])instead.

Removes all data if no key is passed.

State example

var logo = $('#jq-siteLogo');

$(document).data('logo', logo);

$(logo).detach();

$('fieldset[class="toc"]') .before($(document).data('logo'));

$(document).removeData('logo');

Extending for the good

jQuery.extend([deep], target[, object1][, objectN])

var defaults = { validate: false, limit: {max: 5, min: 1}, name: "foo"};var options = { validate: true, limit: {max:10}};var settings = $.extend(true, {}, defaults, options);

Extending for the good (II)

(function($, jQuery, undefined) {

jQuery.fn.myPlugin = function( options ) { var options = $.extend( {}, jQuery.fn.myPlugin.defaults, Options ); // put plugin code here // }

jQuery.fn.myPlugin.defaults = { 'color': '#fff', 'myPublicMethod': function(){} };

})(jQuery, jQuery);

jQuery.props[]

Register of translations

Used by .attr()

jQuery.props = {"for" : "htmlFor","class" : "className","frameborder" : "frameBorder",

…};

jQuery.props['uiwDiv'] = 'ui-jeopardysection-gameboard-header';

AJAX

Global AJAX settings

$.ajaxSetup({ url: "/xmlhttp/", username: "paul", passwort: "secret"

}); $.ajax({ data: myData });

jQuery.ajaxSetup( options )

Global AJAX settings (II)

Methods to set properties defined by $.ajax()

Examples:

$.ajaxSuccess()

$.ajaxError()

$.ajaxStart()

…

Shortcuts

.load(url,[data,] [complete(responseText, textStatus, XHR)])

$('#ticker').load('http://liip.ch#entry1790');

Promises & Deferreds

Proposed by CommonJS

Since jQuery 1.5

var a1 = $.ajax('page1');var a2 = $.ajax('page2');

$.when(a1, a2).then( function() { alert('Called when request successful!'), function() { alert('Called, when request failed.')}

Events

Event binding

.bind(type[, data], handler(event))

'type' might also be an object

$('.clickable').bind({ 'click': function(event) { //callback }, 'mousedown': function(event) { //callback }});

Namespaces

$('.clickable').bind('click.namespace', function(e){});

$('.clickable').bind({ 'click.namespace': function(event) { //callback }, 'mousedown.namespace': function(event) { //callback }});

$('.clickable').unbind('.namespace');

„global“ Events

ajaxStart

ajaxStop

$('#indicator') .bind({ 'ajaxStart.ajaxindicator': function() { // show tumble image }, 'ajaxStop.ajaxindicator': function() { // hide tumble image }});

Selfdefined speeding

$.extend(jQuery.fx.speeds, { slow: 600, fast: 200, // Default speed _default: 400},{ slowmotion: 100,});

$('#clickme').click(function() { $('#book').fadeIn('slowmotion');});

Extending jQuery

jQuery plugins

jQuery.error = function( msg, code ) { var error = []; error[msg] = message; error['code'] = $errorcode; if (typeof console != undefined) { console.error(error) } throw msg; }

jQuery.error( msg )

jQuery UI

$.extend('ui.autosuggest.prototype, { _search: function( value ) { // always save the actual value, // not the one passed as an argument this.term = this.element .addClass( "ui-autocomplete-loading" .val(); this.source( { term: value }, this.response );});

Sizzle.selectors

$.extend( $.expr.filters, { "myPseudoSelector": function( node, index, match ) { // return true, if s.th. Was selected // return false, if not. } });

jQuery.expr.filters

jQuery.expr[':']

Book recommendation

Jakob Westhoffhttp://westhoffswelt.de

ISBN: 978-3-86802-052-6

E-Book-ISBN: 978-3-86802-237-7

Feedback, pls

Joind.inhttp://joind.in/talk/view/3511

Slideshttp://slideshare.net/lapistano

Emaillapstano@php.net

IRC on freenodelapistano

License

This set of slides and the source code included in the download package is licensed under the

Creative Commons Attribution-Noncommercial-Share Alike 2.0 Generic License

http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en