jQuery secrets

2,386 views
2,274 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,386
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery secrets

  1. 1. jQuery secretsBastian Feder IPC 2011lapistano@php.net th 10 October 2011
  2. 2. Me, myself & I JavaScript since 2002 Trainer & coach Opensource addict PHP manual translations FluentDOM phpDox ...
  3. 3. Utilities
  4. 4. 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.
  5. 5. Removing the state jQuery.removeData( element[, key] ) Low level function use $( element ).removeData( [key] ) instead. Removes all data if no key is passed.
  6. 6. State example var $logo = $(#jq-siteLogo); $(document).data(logo, $logo); $logo.detach(); $(#content).before($(document).data(logo)); $(document).removeData(logo);
  7. 7. 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.
  8. 8. 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.);
  9. 9. 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);
  10. 10. User defined properties Register of translations Used by .attr( ) jQuery.propFix = { for : "htmlFor", class : "className", … }; jQuery.extend( jQuery.propFix, {uijgh : "ui-jeopardy-gameboard-header"} );
  11. 11. 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});
  12. 12. AJAX
  13. 13. Shortcuts (II) jQuery.getJSON( url[,data ][,callback(data, textStatus)] ) jQuery.getScript( url[,success(data, textStatus)] )
  14. 14. 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)
  15. 15. 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
  16. 16. Global AJAX events (III) jQuery(#loadingIndicator).bind( "ajaxStart", function() { $(this).show(); } ); jQuery(#loadingIndicator).bind( "ajaxStop", function() { $(this).hide(); } );
  17. 17. Events
  18. 18. Event binding .bind(type[, data], handler(event)) type might also be an object$(.clickable).bind({ click : function(event) { //callback }, mousedown : function(event) { //callback }});
  19. 19. Namespaces$(.clickable).bind(click.namespace, function(e){});$(.clickable).bind({ click.namespace: function(event) { //callback }, mousedown.namespace: function(event) { //callback }});$(.clickable).unbind(.namespace);
  20. 20. Selfdefined speedingjQuery.extend( jQuery.fx.speeds, { slow : 600, fast : 200, _default : 400 }, { slowmotion: 1000 });$(#clickme).click(function() { $(#book).fadeIn(slowmotion);});
  21. 21. Extending jQuery
  22. 22. 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; }}
  23. 23. 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 );});
  24. 24. Questions@lapistanolapistano@php.net
  25. 25. Slidesn contact Please comment the talk on joind.in http://joind.in/3833 Slides http://slideshare.net/lapistano Email: lapistano@php.net
  26. 26. 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

×