Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Overlays, Accordions & Tabs, Oh My

5.030 visualizaciones

Publicado el

Using JQuery Tools for DOM Windows in Plone

  • Inicia sesión para ver los comentarios

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.

×