Bubbles & Trees with jQuery

Bubbles & trees with

Me, myself and I  application developer  PHP since 2001  JavaScript since 2002  papaya CMS since 01.2008 Bastian Feder | papaya Software GmbH 2

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 Bastian Feder | papaya Software GmbH 3

What's this jQuery? „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) Bastian Feder | papaya Software GmbH 4

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) Bastian Feder | papaya Software GmbH 5

All about the basics  interoperability  extending the DOM object  DOM Manipulation  selectors  iterations Bastian Feder | papaya Software GmbH 6

Interoperability  overriding $() <html> <head> <script src=\"prototype.js\"></script>  including jQuery <script src=\"jquery.js\"></script> <script> before other libraries var $j = jQuery.noConflict(); // Use jQuery via $j(...) $j(document).ready(function(){  referencing magic- $j(\"div\").hide(); }); shortcuts // Use Prototype with $(...), etc. $('someid').hide(); </script> </head> <body></body> </html> Bastian Feder | papaya Software GmbH 7

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 Bastian Feder | papaya Software GmbH 8

DOM Manipulation  changing contents ▹ html([val]) ▹ text([val])  replacing DOM node(s) ▹ replaceWith(content) ▹ replaceAll(selector) Bastian Feder | papaya Software GmbH 9

Selectors  basic *, #id, .class, element, selectorN  hierarchical ancestor 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(); Bastian Feder | papaya Software GmbH 11

Iterations  each(object, callback) $(objList) .each( function(i) { requestQueue.addToListOfRequests(objList[i]); } );  map(array, callback[, invert]) var arr = [ \"a\", \"b\", \"c\", \"d\", \"e\" ] $(\"div\").text(arr.join(\", \")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); Bastian Feder | papaya Software GmbH 12

Animation & user interaction  appearance show(), hide(), toggle() $(document.body).click(function () {  sliding $(\"div\").show(\"slow\"); $(\"div\").animate({left:'+=200'},2000); slideDown(), slideUp(), slideToggle() $(\"div\").queue(function () { $(this).addClass(\"newcolor\");  fading $(this).dequeue(); }); fadeIn(speed[,callback]), $(\"div\").animate({left:'-=200'},500); $(\"div\").queue(function () { fadeOut(speed[,callback]), fadeTo(speed, $(this).removeClass(\"newcolor\"); opacity[,callback]) $(this).dequeue(); });  aminate & (de)queue $(\"div\").slideUp(); }); Bastian Feder | papaya Software GmbH 13

Event-handling (DOM perspective)  DOM handles events in 2 different ways: ▹ bubbling ▹ capturing Bastian Feder | papaya Software GmbH 14

Event-handling (II)  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) Bastian Feder | papaya Software GmbH 15

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]) Bastian Feder | papaya Software GmbH 16

Handling asynchronous requests Bastian Feder | papaya Software GmbH 17

Request handling - example Live demo Bastian Feder | papaya Software GmbH 18

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. Bastian Feder | papaya Software GmbH 19

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); } Bastian Feder | papaya Software GmbH 20

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 Bastian Feder | papaya Software GmbH 21

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) Bastian Feder | papaya Software GmbH 22

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 Bastian Feder | papaya Software GmbH 23

Bubbles & Trees with jQuery

0 comments

Notes on slide 1

3 Favorites