Your SlideShare is downloading. ×
0
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Bubbles & Trees with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bubbles & Trees with jQuery

2,818

Published on

This presention gives an overview over the functionality of the JavaScript framework jQuery.

This presention gives an overview over the functionality of the JavaScript framework jQuery.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,818
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
103
Comments
0
Likes
4
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. Bubbles & trees with
  • 2. Me, myself and I  application developer  PHP since 2001  JavaScript since 2002  papaya CMS since 01.2008 Bastian Feder | papaya Software GmbH 2
  • 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 3
  • 4. 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
  • 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 5
  • 6. All about the basics  interoperability  extending the DOM object  DOM Manipulation  selectors  iterations Bastian Feder | papaya Software GmbH 6
  • 7. 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> Bastian Feder | papaya Software GmbH 7
  • 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 8
  • 9. DOM Manipulation  changing contents ▹ html([val]) ▹ text([val])  replacing DOM node(s) ▹ replaceWith(content) ▹ replaceAll(selector) Bastian Feder | papaya Software GmbH 9
  • 10. 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]) Bastian Feder | papaya Software GmbH 10
  • 11. 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(); Bastian Feder | papaya Software GmbH 11
  • 12. 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); }); Bastian Feder | papaya Software GmbH 12
  • 13. 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(); }); Bastian Feder | papaya Software GmbH 13
  • 14. Event-handling (DOM perspective)  DOM handles events in 2 different ways: ▹ bubbling ▹ capturing Bastian Feder | papaya Software GmbH 14
  • 15. 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
  • 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 16
  • 17. Handling asynchronous requests Bastian Feder | papaya Software GmbH 17
  • 18. Request handling - example Live demo Bastian Feder | papaya Software GmbH 18
  • 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 19
  • 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 20
  • 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 21
  • 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 22
  • 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 Bastian Feder | papaya Software GmbH 23

×