jQuery secrets

jQuery secretsBastian Feder IPC Spring 2011 Berlinlapistano@php.net 31th 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;

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.5var 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( 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 lapistano@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

http://www.scoop.it	48
http://www.techgig.com	4
http://paper.li	3
http://www.slideshare.net	3
http://api.embed.ly	1

jQuery secrets

by Bastian Feder on Jun 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 59

Statistics

jQuery secrets — Presentation Transcript