Your SlideShare is downloading. ×
0
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
jQuery secrets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery secrets

4,959

Published on

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

No Downloads
Views
Total Views
4,959
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×