jQuery secrets

5,645 views
5,415 views

Published on

Published in: Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,645
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

jQuery secrets

  1. 1. jQuery secretsBastian Feder IPC Spring 2011 Berlinlapistano@php.net 31th May 2011
  2. 2. Me, myself & I JavaScript since 2002 PHP since 2001 Opensource addict PHP manual translations FluentDOM
  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 $().data() instead.
  5. 5. 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
  6. 6. Removing the state jQuery.removeData(element[, key]) Low level function use $().removeData([key]) instead. Removes all data if no key is passed.
  7. 7. State example var logo = $(#jq-siteLogo); $(document).data(logo, logo); $(logo).detach(); $(fieldset[class="toc"]) .before($(document).data(logo)); $(document).removeData(logo);
  8. 8. 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);
  9. 9. 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);
  10. 10. jQuery.props[] Register of translations Used by .attr() jQuery.props = { "for" : "htmlFor", "class" : "className", "frameborder" : "frameBorder", … }; jQuery.props[uiwDiv] = ui-jeopardysection-gameboard-header;
  11. 11. AJAX
  12. 12. Global AJAX settings jQuery.ajaxSetup( options )$.ajaxSetup({ url: "/xmlhttp/", username: "paul", passwort: "secret"});$.ajax({ data: myData });
  13. 13. Global AJAX settings (II) Methods to set properties defined by $.ajax() Examples: $.ajaxSuccess() $.ajaxError() $.ajaxStart() …
  14. 14. Shortcuts .load(url,[data,] [complete(responseText, textStatus, XHR)])$(#ticker).load(http://liip.ch#entry1790);
  15. 15. 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.)}
  16. 16. Events
  17. 17. Event binding .bind(type[, data], handler(event)) type might also be an object$(.clickable).bind({ click: function(event) { //callback }, mousedown: function(event) { //callback }});
  18. 18. Namespaces$(.clickable).bind(click.namespace, function(e){});$(.clickable).bind({ click.namespace: function(event) { //callback }, mousedown.namespace: function(event) { //callback }});$(.clickable).unbind(.namespace);
  19. 19. „global“ Events ajaxStart ajaxStop$(#indicator) .bind({ ajaxStart.ajaxindicator: function() { // show tumble image }, ajaxStop.ajaxindicator: function() { // hide tumble image }});
  20. 20. Selfdefined speeding$.extend(jQuery.fx.speeds, { slow: 600, fast: 200, // Default speed _default: 400},{ slowmotion: 100,});$(#clickme).click(function() { $(#book).fadeIn(slowmotion);});
  21. 21. Extending jQuery
  22. 22. 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;}
  23. 23. 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 );});
  24. 24. 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. } });
  25. 25. Book recommendation Jakob Westhoff http://westhoffswelt.de ISBN: 978-3-86802-052-6 E-Book-ISBN: 978-3-86802-237-7
  26. 26. Feedback, pls Joind.in http://joind.in/talk/view/3511 Slides http://slideshare.net/lapistano Email lapistano@php.net IRC on freenode lapistano
  27. 27. 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

×