Overlays, Accordions & Tabs, Oh My

4,600 views
4,453 views

Published on

Using JQuery Tools for DOM Windows in Plone

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,600
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
52
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Overlays, Accordions & Tabs, Oh My

    1. 1. Overlays, Accordions & Tabs, Oh My Steve McMahon
    2. 2. Overlays, Accordions DOM Window Bling & Tabs, Oh My Steve McMahon
    3. 3. Overlays, Accordions DOM Window Bling & Tabs, Oh My Or: How do I do Steve McMahon that Lightboxy stuff in Plone?
    4. 4. Demonstration: Overlays in Plone 4
    5. 5. Technology Stack
    6. 6. Technology Stack • Javascript / CSS
    7. 7. Technology Stack • Javascript / CSS • jQuery
    8. 8. Technology Stack • Javascript / CSS • jQuery • jQuery Tools
    9. 9. Technology Stack • Javascript / CSS • jQuery • jQuery Tools • Plone-specific Helpers
    10. 10. What is jQuery?
    11. 11. What is jQuery? • < 20k Javascript DOM manipulation library
    12. 12. What is jQuery? • < 20k Javascript DOM manipulation library • Unobtrusive Javascript
    13. 13. What is jQuery? • < 20k Javascript DOM manipulation library • Unobtrusive Javascript • Emphasis on Graceful Degradation
    14. 14. What jQuery Tools Brings
    15. 15. What jQuery Tools Brings • Overlays
    16. 16. What jQuery Tools Brings • Overlays • Tabs / Accordians
    17. 17. What jQuery Tools Brings • Overlays • Tabs / Accordians • Tooltips
    18. 18. What jQuery Tools Brings • Overlays • Tabs / Accordians • Tooltips • Highlighting
    19. 19. What jQuery Tools Brings • 2
    20. 20. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped
    21. 21. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped • Primacy of CSS
    22. 22. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped • Primacy of CSS • Excellent code / proven team
    23. 23. jQuery in Brief: Selectors
    24. 24. jQuery in Brief: Selectors selection = jQuery(‘css selector’);
    25. 25. jQuery in Brief: Selectors selection = jQuery(‘css selector’); selection = jQuery(‘#portal-globalnav’);
    26. 26. jQuery in Brief: Selectors selection = jQuery(‘css selector’); selection = jQuery(‘#portal-globalnav’); selection = jQuery(‘#portal-globalnav li a’);
    27. 27. jQuery in Brief: Advanced Selectors
    28. 28. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’);
    29. 29. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’); selection = jQuery(‘input [name^=archetypes]’);
    30. 30. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’); selection = jQuery(‘input [name^=archetypes]’); selection = jQuery(‘a [href$=login_form]’);
    31. 31. jQuery in Brief: Filters (Examples)
    32. 32. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’);
    33. 33. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’); selection = jQuery(‘:hidden’);
    34. 34. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’); selection = jQuery(‘:hidden’); selection = jQuery(‘a[href*=docs] :parent’);
    35. 35. jQuery in Brief: Toolchains
    36. 36. jQuery in Brief: Toolchains jQuery(‘#mychart tr:even’).addClass(‘even’);
    37. 37. jQuery in Brief: Toolchains jQuery(‘#mychart tr:even’).addClass(‘even’); selection = jQuery(‘:hidden’).css(‘color’,‘blue’).show();
    38. 38. jQuery in Brief: Toolchains jQuery(‘#mychart tr:even’).addClass(‘even’); selection = jQuery(‘:hidden’).css(‘color’,‘blue’).show(); selection = jQuery(‘#myform:input’) .parent() .wrapAll(‘<div class=”myFields” />’);
    39. 39. jQuery in Brief: Selection Iteration
    40. 40. jQuery in Brief: Selection Iteration jq('#portal-column-two dl.portlet') .each( function() { jq(this) .children('dd') .wrapAll( '<dd class="portletContent"><dl></dl></dd>' ); });
    41. 41. Demonstration: jQuery Tools Bling
    42. 42. jQuery Tools: Setup Pattern
    43. 43. jQuery Tools: Setup Pattern jq( function() { jq(‘.trigger selector’) .tabs( ‘.target selector’, { // configuration options } ); });
    44. 44. jQuery Tools: Setup Example
    45. 45. jQuery Tools: Setup Example jq( function() { jq(‘dl.tabbed’) // tab container .tabs( ‘dl.tabbed dd’, // panes { tabs: ‘dt’, // selector for tabs effect: 'slide' // effect } ); });
    46. 46. jQuery Tools in Plone: plone.app.jquerytools
    47. 47. jQuery Tools in Plone: plone.app.jquerytools • Built into Plone 4
    48. 48. jQuery Tools in Plone: plone.app.jquerytools • Built into Plone 4 • Works with Plone 3 — but must be added by GS extension profile
    49. 49. jQuery Tools in Plone: plone.app.jquerytools • Built into Plone 4 • Works with Plone 3 — but must be added by GS extension profile • Includes AJAX form helpers
    50. 50. plone.app.jquerytools Concrete Example Accordion Portlets
    51. 51. Accordion Portlets Code • 1 of 2
    52. 52. Accordion Portlets Code • 1 of 2 jq(function() { // restructure the portlets to gather pane elements jq('#portal-column-two dl.portlet') .each(function() { jq(this) .children('dd') .wrapAll( '<dd class="portletContent"><dl /></dd>' ); }); ... });
    53. 53. Accordion Portlets Code • 2 of 2
    54. 54. Accordion Portlets Code • 2 of 2 ... // turn on the tabs jq('#portal-column-two') .tabs( '#portal-column-two dl.portlet dd.portletContent', { tabs: 'dl.portlet dt.portletHeader a', effect: 'slide' } ); });
    55. 55. AJAX Form Helper • Built into plone.app.jquerytools — not jQuery Tools • On submit, form input posted via AJAX • Handling of no-form reply configurable: • close • refresh • load another page
    56. 56. AJAX Form Example
    57. 57. AJAX Form Example jq(function(){ // login form jq('#portal-personaltools a[href$=/login]') .prepOverlay( { subtype: 'ajax', filter: '#content > *', formselector: 'form#login_form', noform: 'reload' } ); });
    58. 58. AJAXy Image Example
    59. 59. AJAXy Image Example jq(function(){ jq('.newsImageContainer a') // trigger .prepOverlay({ subtype: 'image', urlmatch: '/image_view_fullscreen$', urlreplace: '_preview' }); });
    60. 60. Products.pipbox
    61. 61. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3
    62. 62. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3 • Avoid Javascript for common cases
    63. 63. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3 • Avoid Javascript for common cases • Has helpers that don’t belong in the Plone core
    64. 64. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3 • Avoid Javascript for common cases • Has helpers that don’t belong in the Plone core • Global jQuery Tools configuration
    65. 65. Products.pipbox Example
    66. 66. Products.pipbox Example { type: 'overlay', subtype: 'image', selector: '.newsImageContainer a', urlmatch: '/image_view_fullscreen$', urlreplace: '_preview' }
    67. 67. pipbox.portlet.popform • Timed popup forms configured in a portlet • Cookie checks to avoid extreme annoyance • Development sponsored by Groundwire (OneNW) • Thanks to David Glick
    68. 68. tabs.overlays.tooltips.expose “With great power comes great responsibility.” Spiderman’s Uncle Ben
    69. 69. tabs.overlays.tooltips.expose Use it to enhance — “With great power comes not annoy, great responsibility.” confuse Spiderman’s Uncle Ben or control.

    ×