jQuery secrets

jQuery secretsBastian Feder IPC 2011lapistano@php.net th 10 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 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(); } );

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 speedingjQuery.extend( jQuery.fx.speeds, { slow : 600, fast : 200, _default : 400 }, { slowmotion: 1000 });$(#clickme).click(function() { $(#book).fadeIn(slowmotion);});

Extending jQuery

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 UIjQuery.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@lapistanolapistano@php.net

Slidesn 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

by Bastian Feder on Oct 10, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 3

Statistics

jQuery secrets — Presentation Transcript