jQuery secrets

  • 4,758 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,758
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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