Bubbles & Trees with jQuery

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Bubbles & Trees with jQuery - Presentation 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=\"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
    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=\"unit\">'+ 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 = [ \"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
    13. 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
    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

    + Bastian FederBastian Feder, 2 years ago

    custom

    1554 views, 3 favs, 0 embeds more stats

    This presention gives an overview over the function more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1554
      • 1554 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 68
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories