jQuery secrets

Bastian Federlapistano@php.net

IPC 201110th October 2011

Me, myself & I

JavaScript since 2002

Trainer & coach

Opensource addict

PHP manual translations

FluentDOM

phpDox

...

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 $( element ).data( key[, value] ) instead.

Removing the state

jQuery.removeData( element[, key] )

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

Removes all data if no key is passed.

State example

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

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

$logo.detach();

$('#content').before($(document).data('logo'));

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

Hidden events

getData[.namespace]Emitted, when the content is read.

setData[.namespace]Emitted, when the content is set or reset.

changeData[.namespace]Emitted, when the content has been changed. Comes always in hand with the setData event.

Hidden events (II)

var foo = $('div');

foo.bind('changeData.data', function( event, key, value ) {

var data = new Array(value); $('#activitystream').trigger('myCustomEvent', data);

});

foo.data('my.data', 'Tux is a mascott.');

Extending for the good

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

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

User defined properties

Register of translations

Used by .attr( )

jQuery.propFix = {for : "htmlFor",class : "className",

…};

jQuery.extend( jQuery.propFix, {uijgh : "ui-jeopardy-gameboard-header"});

DOM attributes

var tux = $("<div/>", { css : {background: '#AAA'}, text : 'beastie'});

$("div")['css']({background: '#BBB'});

Applies for every entry in jQuery.attrFn(e.g. val, css, text, data, … )

AJAX

Shortcuts (II)

jQuery.getJSON( url[,data ][,callback(data, textStatus)] )

jQuery.getScript( url[,success(data, textStatus)] )

Global AJAX events

ajaxStarteverytime a new request has been fired and no request s running

ajaxStopeverytime no request is running anymore

ajaxCompleteonce for each completed request (success or failure)

Global AJAX events (II)

ajaxErroronce for each failed request

ajaxSuccessonce for each successful request

ajaxSendonce for each request, but before the request is send

Global AJAX events (III)

jQuery('#loadingIndicator').bind( "ajaxStart", function() { $(this).show(); });

jQuery('#loadingIndicator').bind( "ajaxStop", function() { $(this).hide(); });

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');

Selfdefined speeding

jQuery.extend( jQuery.fx.speeds, { slow : 600, fast : 200, _default : 400 }, { slowmotion: 1000 });

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

Extending jQuery

jQuery plugins

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

jQuery.error( message )

jQuery UI

jQuery.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 );});

Questions@lapistano

lapistano@php.net

Slides'n contact

Please comment the talk on joind.in

http://joind.in/3833

Slides

http://slideshare.net/lapistano

Email:

lapistano@php.net

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