bubbles & trees with jquery
Post on 10-May-2015
2.817 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Bastian Feder | papaya Software GmbH 3
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 4
„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?
Bastian Feder | papaya Software GmbH 5
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 6
interoperability extending the DOM object DOM Manipulation selectors iterations
All about the basics
Bastian Feder | papaya Software GmbH 7
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>
Bastian Feder | papaya Software GmbH 8
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 9
DOM Manipulation
changing contents
▹ html([val])▹ text([val])
replacing DOM node(s)▹ replaceWith(content)▹ replaceAll(selector)
Bastian Feder | papaya Software GmbH 10
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])
Bastian Feder | papaya Software GmbH 11
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();
Bastian Feder | papaya Software GmbH 12
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);});
Bastian Feder | papaya Software GmbH 13
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();});
Bastian Feder | papaya Software GmbH 14
Event-handling (DOM perspective)
DOM handles events in 2 different ways:▹ bubbling▹ capturing
Bastian Feder | papaya Software GmbH 15
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)
Bastian Feder | papaya Software GmbH 16
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 17
Handling asynchronous requests
Bastian Feder | papaya Software GmbH 18
Request handling - example
Live demo
Bastian Feder | papaya Software GmbH 19
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 20
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 21
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 22
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 23
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
top related