Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Overlays, Accordions & Tabs, Oh My

4,955 views

Published on

Using JQuery Tools for DOM Windows in Plone

  • Be the first to comment

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.

×