This document discusses using overlays, accordions, and tabs with jQuery and jQuery Tools in Plone. It provides an overview of the technology stack including jQuery, jQuery Tools, and Plone-specific helpers. Examples are given for setting up tabs and accordions, as well as for AJAX forms. The plone.app.jquerytools package and Products.pipbox module are described as ways to incorporate jQuery Tools into Plone. Potential applications discussed include accordion portlets, image overlays, and popup forms.

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.