Your SlideShare is downloading. ×
0
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Overlays, Accordions & Tabs, Oh My

4,226

Published on

Using JQuery Tools for DOM Windows in Plone

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,226
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
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.

    ×