Bubbles & Trees with jQuery

Bubbles & trees with

Bastian Feder | papaya Software GmbH 2

Me, myself and I

application developer PHP since 2001 JavaScript since 2002 papaya CMS since

01.2008


What's this all about?

What is this jQuery? All about the basics Animation and user interaction Event-handling – capability Handling asynchronous requests Plug-ins – an overview Examples Conclusion


„jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.“ (www.jquery.com)

What's this jQuery?


jQuery – some features

Crossbrowser compatible (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)

CSS3 ready outstanding features:

▹ ability to queue effects▹ user defined animations▹ unobtrusiveness in coexistence with other JS

libraries or frameworks (e.g. prototype)


interoperability extending the DOM object DOM Manipulation selectors iterations

All about the basics


Interoperability

overriding $() including jQuery

before other libraries referencing magic-

shortcuts

<html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){ $j("div").hide(); }); // Use Prototype with $(...), etc. $('someid').hide(); </script> </head> <body></body> </html>


Extending the DOM

$(selector, scope)▹ simplifies the selection of DOM elements▹ extends the DOM node with jQuery methods

$(document).ready(callback);

▹ ensures the javascript will be executed after document has been loaded completely


DOM Manipulation

changing contents

▹ html([val])▹ text([val])

replacing DOM node(s)▹ replaceWith(content)▹ replaceAll(selector)


DOM Manipulation (II)

inserting DOM node▹ inside

append(content), prepend(), (append|prepend)To(content)

▹ outsideafter(content), before(content), insert(After|Before)(content)

▹ aroundwrap([html|elem]), wrapAll([html|elem]), wrapInner([html|elem])


Selectors

basic*, #id, .class, element, selectorN

hierarchicalancestor descendant, parent > child, prev + next, prev ~ siblings

filters:first, :last, :not, :animated, etc

/* * add checkbox to first td found in html, * formats the size to a human readable string and * attaches event handlers to the tr element */$('td:first', html).append(checkbox) .parent() // format the size column .find('.size') .each( function() { words = $(this).text().split(' '); $(this).html(words[0] + '<span class="unit">'+ words[1] +'</span>'); }) .end();


Iterations

each(object, callback)

map(array, callback[, invert])

$(objList) .each( function(i) { requestQueue.addToListOfRequests(objList[i]); } );

var arr = [ "a", "b", "c", "d", "e" ]$("div").text(arr.join(", "));

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i);});


Animation & user interaction

appearanceshow(), hide(), toggle()

slidingslideDown(), slideUp(), slideToggle()

fadingfadeIn(speed[,callback]), fadeOut(speed[,callback]), fadeTo(speed, opacity[,callback])

aminate & (de)queue

$(document.body).click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp();});


Event-handling (DOM perspective)

DOM handles events in 2 different ways:▹ bubbling▹ capturing


the 'event' object▹ event.ready()

▹ event.which (keystroke, mouseclick: 1=left, 2=middle, 3=right)

▹ event.preventDefault()

▹ event.stopPropagation()

▹ event.metaKey (PC=ctrl; Mac=Meta)

Event-handling (II)


Event-handling (III)

(un)binding events to a DOM node▹ bind(type[, data], callback)▹ one(type[, data], callback)▹ unbind(type[, data], callback)

handling triggers▹ trigger(type[, data])▹ triggerHandler(type[, data])


Handling asynchronous requests


Request handling - example

Live demo


Plug-ins – an overview

mechanism for adding in methods and functionality things to remember when writing plugins:

▹ names convention (jquery.[nameOfPlugin].js)

▹ methods are attached to jQuery.fn object

▹ function are attached to jQuery object

▹ inside methods 'this' is a reference to current jQuery object

▹ your method must return the jQuery object, unless explicity noted otherwise.

▹ use jQuery instead of $ inside your plugin code - that allows users to change the alias for jQuery in a single place.


Plug-ins – an example/** * calculates the number to a human readable format * * calculation taken from papaya-cms {@link http://www.papaya-cms.com} */jQuery.fn.toHumanReadable = function() { var size = this.text(); var unit; if (size > 10000000000) { size = (Math.round(size / 1073741824 * 100) / 100); unit = 'GB'; } else if (size > 10000000) { size = (Math.round(size / 1048576 * 100) / 100) unit = 'MB'; } else if (size > 10000) { size = (Math.round(size / 1024 * 100) / 100) unit = 'kB'; } else { size = Math.round(size) unit = 'B'; } size = size.toString(); var p = size.lastIndexOf('.'); if (p > 0) { var i = 2 - size.length + p + 1; while (i > 0) { size = size + '0'; i--; } } else { size = size + '.00'; } return this.text(size + ' ' + unit);}


Conclusion

jQuery is ..▹ an extensive javascript library with an huge

amount of functionallity▹ very easy to learn and use▹ pretty good documented▹ easy to extend by writing plug-ins


References

jQuery website (http://www.jquery.com) A List Apart: DOM Design Tricks I/II

(http://www.alistapart.com/articles/domtricks2)

Selfhtml (http://de.selfhtml.org; sorry german only)

slides soonish on slideshare (http://www.slideshare.com/lapistano)

http://www.jquery.com/

http://www.alistapart.com/articles/domtricks2

http://de.selfhtml.org/

http://www.slideshare.com/lapistano


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

http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en

Bubbles & Trees with jQuery

Technology

var size

papaya cms

jquery methods

size column

event object event

current jquery object

noconflict use jquery

ready event