Overlays, Accordions & Tabs, Oh My

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Overlays, Accordions & Tabs, Oh My - Presentation 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.

    + plonesteveplonesteve, 3 weeks ago

    custom

    207 views, 2 favs, 0 embeds more stats

    Using JQuery Tools for DOM Windows in Plone

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 207
      • 207 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 7
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories