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 referenc...
Saving possible? jQuery.acceptData( element )   Low level function invoked by   $(elem).data()   Extend jQuery.noData to s...
Removing the state jQuery.removeData(element[, key])   Low level function use   $().removeData([key])   instead.   Removes...
State example var logo = $(#jq-siteLogo); $(document).data(logo, logo); $(logo).detach(); $(fieldset[class="toc"])   .befo...
Extending for the good  jQuery.extend([deep], target[, object1][, objectN])var defaults = {    validate: false,    limit: ...
Extending for the good                        (II)(function($, jQuery, undefined) { jQuery.fn.myPlugin = function( options...
jQuery.props[] Register of translations Used by .attr()  jQuery.props = {     "for"         : "htmlFor",     "class"      ...
AJAX
Global AJAX settings  jQuery.ajaxSetup( options )$.ajaxSetup({   url: "/xmlhttp/",   username: "paul",   passwort: "secret...
Global AJAX settings                (II) Methods to set properties defined by $.ajax() Examples:   $.ajaxSuccess()   $.aja...
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).t...
Events
Event binding  .bind(type[, data], handler(event))    type might also be an object$(.clickable).bind({  click: function(ev...
Namespaces$(.clickable).bind(click.namespace, function(e){});$(.clickable).bind({  click.namespace: function(event) { //ca...
„global“ Events  ajaxStart  ajaxStop$(#indicator)  .bind({    ajaxStart.ajaxindicator: function() {       // show tumble i...
Selfdefined speeding$.extend(jQuery.fx.speeds, {   slow: 600,   fast: 200,   // Default speed   _default: 400},{   slowmot...
Extending jQuery
jQuery plugins  jQuery.error( msg )jQuery.error = function( msg, code ) {  var error = [];  error[msg] = message;  error[c...
jQuery UI$.extend(ui.autosuggest.prototype, {  _search: function( value ) {    // always save the actual value,    // not ...
Sizzle.selectors  jQuery.expr.filters  jQuery.expr[:] $.extend(   $.expr.filters,   {     "myPseudoSelector": function( no...
Book recommendation             Jakob Westhoff             http://westhoffswelt.de             ISBN:             978-3-868...
Feedback, pls Joind.in http://joind.in/talk/view/3511 Slides http://slideshare.net/lapistano Email lapistano@php.net IRC o...
License This set of slides and the source code included  in the download package is licensed under the Creative Commons At...
Upcoming SlideShare
Loading in …5
×

jQuery secrets

5,899 views

Published on

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

No Downloads
Views
Total views
5,899
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

×