international PHP2011_Bastian Feder_jQuery's Secrets

Bastian Feder | Liip Ag

jQuery secrets

jQuery secrets
Bastian Feder IPC Spring 2011 Berlin
lapistano@php.net 31th May 2011

Me, myself & I

JavaScript since 2002
PHP since 2001
Opensource addict
PHP manual translations
FluentDOM

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

Global AJAX settings

jQuery.ajaxSetup( options )

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

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

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

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

jQuery plugins

jQuery.error( msg )

jQuery.error = function( msg, code ) {
var error = [];
error[msg] = message;
error['code'] = $errorcode;
if (typeof console != undefined) {
console.error(error)
}
throw 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

jQuery.expr.filters
jQuery.expr[':']

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

Book recommendation

Jakob Westhoff
http://westhoffswelt.de
ISBN:
978-3-86802-052-6
E-Book-ISBN:
978-3-86802-237-7

Feedback, pls

Joind.in
http://joind.in/talk/view/3511
Slides
http://slideshare.net/lapistano
Email
lapstano@php.net
IRC on freenode
lapistano

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

international PHP2011_Bastian Feder_jQuery's Secrets

More Related Content

What's hot

Viewers also liked

Similar to international PHP2011_Bastian Feder_jQuery's Secrets

More from smueller_sandsmedia

Recently uploaded

international PHP2011_Bastian Feder_jQuery's Secrets