Overlays, Accordions & Tabs, Oh My

  • 4,104 views
Uploaded on

Using JQuery Tools for DOM Windows in Plone

Using JQuery Tools for DOM Windows in Plone

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,104
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
50
Comments
0
Likes
2

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. Overlays, Accordions & Tabs, Oh My Steve McMahon
  • 2. Overlays, Accordions DOM Window Bling & Tabs, Oh My Steve McMahon
  • 3. Overlays, Accordions DOM Window Bling & Tabs, Oh My Or: How do I do Steve McMahon that Lightboxy stuff in Plone?
  • 4. Demonstration: Overlays in Plone 4
  • 5. Technology Stack
  • 6. Technology Stack • Javascript / CSS
  • 7. Technology Stack • Javascript / CSS • jQuery
  • 8. Technology Stack • Javascript / CSS • jQuery • jQuery Tools
  • 9. Technology Stack • Javascript / CSS • jQuery • jQuery Tools • Plone-specific Helpers
  • 10. What is jQuery?
  • 11. What is jQuery? • < 20k Javascript DOM manipulation library
  • 12. What is jQuery? • < 20k Javascript DOM manipulation library • Unobtrusive Javascript
  • 13. What is jQuery? • < 20k Javascript DOM manipulation library • Unobtrusive Javascript • Emphasis on Graceful Degradation
  • 14. What jQuery Tools Brings
  • 15. What jQuery Tools Brings • Overlays
  • 16. What jQuery Tools Brings • Overlays • Tabs / Accordians
  • 17. What jQuery Tools Brings • Overlays • Tabs / Accordians • Tooltips
  • 18. What jQuery Tools Brings • Overlays • Tabs / Accordians • Tooltips • Highlighting
  • 19. What jQuery Tools Brings • 2
  • 20. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped
  • 21. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped • Primacy of CSS
  • 22. What jQuery Tools Brings • 2 • Minimalism < 6k gzipped • Primacy of CSS • Excellent code / proven team
  • 23. jQuery in Brief: Selectors
  • 24. jQuery in Brief: Selectors selection = jQuery(‘css selector’);
  • 25. jQuery in Brief: Selectors selection = jQuery(‘css selector’); selection = jQuery(‘#portal-globalnav’);
  • 26. jQuery in Brief: Selectors selection = jQuery(‘css selector’); selection = jQuery(‘#portal-globalnav’); selection = jQuery(‘#portal-globalnav li a’);
  • 27. jQuery in Brief: Advanced Selectors
  • 28. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’);
  • 29. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’); selection = jQuery(‘input [name^=archetypes]’);
  • 30. jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=first_name]’); selection = jQuery(‘input [name^=archetypes]’); selection = jQuery(‘a [href$=login_form]’);
  • 31. jQuery in Brief: Filters (Examples)
  • 32. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’);
  • 33. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’); selection = jQuery(‘:hidden’);
  • 34. jQuery in Brief: Filters (Examples) selection = jQuery(‘#myform :input’); selection = jQuery(‘:hidden’); selection = jQuery(‘a[href*=docs] :parent’);
  • 35. jQuery in Brief: Toolchains
  • 36. jQuery in Brief: Toolchains jQuery(‘#mychart tr:even’).addClass(‘even’);
  • 37. jQuery in Brief: Toolchains jQuery(‘#mychart tr:even’).addClass(‘even’); selection = jQuery(‘:hidden’).css(‘color’,‘blue’).show();
  • 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. jQuery in Brief: Selection Iteration
  • 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. Demonstration: jQuery Tools Bling
  • 42. jQuery Tools: Setup Pattern
  • 43. jQuery Tools: Setup Pattern jq( function() { jq(‘.trigger selector’) .tabs( ‘.target selector’, { // configuration options } ); });
  • 44. jQuery Tools: Setup Example
  • 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. jQuery Tools in Plone: plone.app.jquerytools
  • 47. jQuery Tools in Plone: plone.app.jquerytools • Built into Plone 4
  • 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. 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. plone.app.jquerytools Concrete Example Accordion Portlets
  • 51. Accordion Portlets Code • 1 of 2
  • 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. Accordion Portlets Code • 2 of 2
  • 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. 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. AJAX Form Example
  • 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. AJAXy Image Example
  • 59. AJAXy Image Example jq(function(){ jq('.newsImageContainer a') // trigger .prepOverlay({ subtype: 'image', urlmatch: '/image_view_fullscreen$', urlreplace: '_preview' }); });
  • 60. Products.pipbox
  • 61. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3
  • 62. Products.pipbox • Easy way to load plone.app.jquerytools in Plone 3 • Avoid Javascript for common cases
  • 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. 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. Products.pipbox Example
  • 66. Products.pipbox Example { type: 'overlay', subtype: 'image', selector: '.newsImageContainer a', urlmatch: '/image_view_fullscreen$', urlreplace: '_preview' }
  • 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. tabs.overlays.tooltips.expose “With great power comes great responsibility.” Spiderman’s Uncle Ben
  • 69. tabs.overlays.tooltips.expose Use it to enhance — “With great power comes not annoy, great responsibility.” confuse Spiderman’s Uncle Ben or control.