jQuery secrets

jQuery secrets
Bastian Feder IPC 2011
lapistano@php.net th
10 October 2011

Me, myself & I

JavaScript since 2002
Trainer & coach
Opensource addict
PHP manual translations
FluentDOM
phpDox
...

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

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

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

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

Shortcuts (II)

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

Global AJAX events

ajaxStart
everytime a new request has been fired and no request s running

ajaxStop
everytime no request is running anymore

ajaxComplete
once for each completed request (success or failure)

Global AJAX events (II)

ajaxError
once for each failed request

ajaxSuccess
once for each successful request

ajaxSend
once 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();
}
);

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

jQuery plugins

jQuery.error( message )

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

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

jQuery secrets

More Related Content

What's hot (20)

Similar to jQuery secrets (20)

More from Bastian Feder (18)

Recently uploaded (20)

jQuery secrets