Bubbles & Trees with jQuery

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

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)


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)


All about the basics
 interoperability
 extending the DOM object
 DOM Manipulation
 selectors
 iterations


Interoperability
 overriding $() <html>
<head>
<script src=quot;prototype.jsquot;></script>
 including jQuery <script src=quot;jquery.jsquot;></script>
<script>

before other libraries
var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
 referencing magic- $j(quot;divquot;).hide();
});
shortcuts // 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)

▹ outside
after(content), before(content), insert(After|Before)(content)

▹ around
wrap([html|elem]), wrapAll([html|elem]), wrapInner([html|elem])


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=quot;unitquot;>'+ words[1] +'</span>');
})
.end();


Iterations
 each(object, callback)
$(objList)
.each( function(i) {
requestQueue.addToListOfRequests(objList[i]);
}
);

 map(array, callback[, invert])
var arr = [ quot;aquot;, quot;bquot;, quot;cquot;, quot;dquot;, quot;equot; ]
$(quot;divquot;).text(arr.join(quot;, quot;));

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


Animation &
user interaction
 appearance
show(), hide(), toggle()
$(document.body).click(function () {
 sliding $(quot;divquot;).show(quot;slowquot;);
$(quot;divquot;).animate({left:'+=200'},2000);
slideDown(), slideUp(), slideToggle() $(quot;divquot;).queue(function () {
$(this).addClass(quot;newcolorquot;);
 fading $(this).dequeue();
});
fadeIn(speed[,callback]), $(quot;divquot;).animate({left:'-=200'},500);
$(quot;divquot;).queue(function () {
fadeOut(speed[,callback]), fadeTo(speed,
$(this).removeClass(quot;newcolorquot;);
opacity[,callback]) $(this).dequeue();
});
 aminate & (de)queue $(quot;divquot;).slideUp();
});


Event-handling (DOM perspective)

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


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)


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)


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


Bubbles & Trees with jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Bubbles & Trees with jQuery

Similar to Bubbles & Trees with jQuery (20)

More from Bastian Feder

More from Bastian Feder (20)

Recently uploaded

Recently uploaded (20)

Bubbles & Trees with jQuery