Using JQuery Tools for DOM Windows in Plone

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.