Your SlideShare is downloading. ×
0
Overlays, Accordions
  & Tabs, Oh My
     Steve McMahon
Overlays, Accordions
DOM Window Bling
  & Tabs, Oh My
     Steve McMahon
Overlays, Accordions
DOM Window Bling
  & Tabs, Oh My
         Or: How do I do
     Steve McMahon
           that Lightbox...
Demonstration:
Overlays in Plone 4
Technology Stack
Technology Stack

• Javascript / CSS
Technology Stack

• Javascript / CSS
• jQuery
Technology Stack

• Javascript / CSS
• jQuery
• jQuery Tools
Technology Stack

• Javascript / CSS
• jQuery
• jQuery Tools
• Plone-specific Helpers
What is jQuery?
What is jQuery?
• < 20k Javascript
 DOM manipulation
 library
What is jQuery?
• < 20k Javascript
 DOM manipulation
 library

• Unobtrusive
 Javascript
What is jQuery?
• < 20k Javascript
 DOM manipulation
 library

• Unobtrusive
 Javascript

• Emphasis on
 Graceful
 Degrada...
What jQuery Tools Brings
What jQuery Tools Brings

• Overlays
What jQuery Tools Brings

• Overlays
• Tabs /
 Accordians
What jQuery Tools Brings

• Overlays
• Tabs /
 Accordians

• Tooltips
What jQuery Tools Brings

• Overlays
• Tabs /
 Accordians

• Tooltips
• Highlighting
What jQuery Tools Brings • 2
What jQuery Tools Brings • 2

• Minimalism
 < 6k gzipped
What jQuery Tools Brings • 2

• Minimalism
 < 6k gzipped

• Primacy of CSS
What jQuery Tools Brings • 2

• Minimalism
 < 6k gzipped

• Primacy of CSS
• Excellent code /
 proven team
jQuery in Brief:
   Selectors
jQuery in Brief:
            Selectors

selection = jQuery(‘css selector’);
jQuery in Brief:
            Selectors

selection = jQuery(‘css selector’);


selection = jQuery(‘#portal-globalnav’);
jQuery in Brief:
            Selectors

selection = jQuery(‘css selector’);


selection = jQuery(‘#portal-globalnav’);


s...
jQuery in Brief:
Advanced Selectors
jQuery in Brief:
     Advanced Selectors

selection = jQuery(‘input [name=first_name]’);
jQuery in Brief:
     Advanced Selectors

selection = jQuery(‘input [name=first_name]’);


selection = jQuery(‘input [name^...
jQuery in Brief:
     Advanced Selectors

selection = jQuery(‘input [name=first_name]’);


selection = jQuery(‘input [name^...
jQuery in Brief:
Filters (Examples)
jQuery in Brief:
      Filters (Examples)

selection = jQuery(‘#myform :input’);
jQuery in Brief:
      Filters (Examples)

selection = jQuery(‘#myform :input’);


selection = jQuery(‘:hidden’);
jQuery in Brief:
      Filters (Examples)

selection = jQuery(‘#myform :input’);


selection = jQuery(‘:hidden’);


select...
jQuery in Brief:
  Toolchains
jQuery in Brief:
           Toolchains

jQuery(‘#mychart tr:even’).addClass(‘even’);
jQuery in Brief:
           Toolchains

jQuery(‘#mychart tr:even’).addClass(‘even’);


selection = jQuery(‘:hidden’).css(‘...
jQuery in Brief:
           Toolchains

jQuery(‘#mychart tr:even’).addClass(‘even’);


selection = jQuery(‘:hidden’).css(‘...
jQuery in Brief:
Selection Iteration
jQuery in Brief:
          Selection Iteration

jq('#portal-column-two dl.portlet')
   .each( function() {

        jq(thi...
Demonstration:
jQuery Tools Bling
jQuery Tools:
Setup Pattern
jQuery Tools:
              Setup Pattern
jq( function() {

      jq(‘.trigger selector’)
         .tabs(
             ‘.t...
jQuery Tools:
Setup Example
jQuery Tools:
               Setup Example
jq( function() {

      jq(‘dl.tabbed’)            // tab container
         .t...
jQuery Tools in Plone:
plone.app.jquerytools
jQuery Tools in Plone:
  plone.app.jquerytools

• Built into Plone 4
jQuery Tools in Plone:
 plone.app.jquerytools

• Built into Plone 4
• Works with Plone 3 —
 but must be added by GS
 exten...
jQuery Tools in Plone:
  plone.app.jquerytools

• Built into Plone 4
• Works with Plone 3 —
 but must be added by GS
 exte...
plone.app.jquerytools
  Concrete Example


  Accordion Portlets
Accordion Portlets
   Code • 1 of 2
Accordion Portlets
            Code • 1 of 2
jq(function() {
  // restructure the portlets to gather pane elements

      ...
Accordion Portlets
   Code • 2 of 2
Accordion Portlets
              Code • 2 of 2
...
      // turn on the tabs

      jq('#portal-column-two')
         .tab...
AJAX Form Helper
•   Built into plone.app.jquerytools —
    not jQuery Tools

•   On submit, form input posted via AJAX

•...
AJAX Form Example
AJAX Form Example

jq(function(){
    // login form
    jq('#portal-personaltools a[href$=/login]')
       .prepOverlay(
 ...
AJAXy Image Example
AJAXy Image Example

jq(function(){

      jq('.newsImageContainer a') // trigger
          .prepOverlay({
             su...
Products.pipbox
Products.pipbox


•   Easy way to load plone.app.jquerytools
    in Plone 3
Products.pipbox


•   Easy way to load plone.app.jquerytools
    in Plone 3

•   Avoid Javascript for common cases
Products.pipbox


•   Easy way to load plone.app.jquerytools
    in Plone 3

•   Avoid Javascript for common cases

•   Ha...
Products.pipbox


•   Easy way to load plone.app.jquerytools
    in Plone 3

•   Avoid Javascript for common cases

•   Ha...
Products.pipbox Example
Products.pipbox Example


 {
     type:      'overlay',
     subtype: 'image',
     selector: '.newsImageContainer a',
   ...
pipbox.portlet.popform


•   Timed popup forms configured in a portlet

•   Cookie checks to avoid extreme annoyance

•   D...
tabs.overlays.tooltips.expose



  “With great power comes
    great responsibility.”
                  Spiderman’s Uncle ...
tabs.overlays.tooltips.expose

     Use it to enhance
             —
  “With great power comes
        not annoy,
    grea...
Upcoming SlideShare
Loading in...5
×

Overlays, Accordions & Tabs, Oh My

4,232

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,232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Transcript of "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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×