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 Lightboxy
stuff in Plone?

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
Degradation

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’);
selection = jQuery(‘#portal-globalnav li a’);

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^=archetypes]’);

jQuery in Brief:
Advanced Selectors
selection = jQuery(‘input [name=first_name]’);
selection = jQuery(‘input [name^=archetypes]’);
selection = jQuery(‘a [href$=login_form]’);

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’);
selection = jQuery(‘a[href*=docs] :parent’);

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(‘color’,‘blue’).show();

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” />’);

jQuery in Brief:
Selection Iteration

jQuery in Brief:
Selection Iteration
jq('#portal-column-two dl.portlet')
.each( function() {
jq(this)
.children('dd')
.wrapAll(
'<dd class="portletContent"><dl></dl></dd>'
);
});

Demonstration:
jQuery Tools Bling

jQuery Tools:
Setup Pattern

jQuery Tools:
Setup Pattern
jq( function() {
jq(‘.trigger selector’)
.tabs(
‘.target selector’,
{
// configuration options
}
);
});

jQuery Tools:
Setup Example

jQuery Tools:
Setup Example
jq( function() {
jq(‘dl.tabbed’) // tab container
.tabs(
‘dl.tabbed dd’, // panes
{
tabs: ‘dt’, // selector for tabs
effect: 'slide' // effect
}
);
});

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
extension profile

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

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
jq('#portal-column-two dl.portlet')
.each(function() {
jq(this)
.children('dd')
.wrapAll(
'<dd class="portletContent"><dl /></dd>'
);
});
...
});

Accordion Portlets
Code • 2 of 2

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'
}
);
});

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

AJAX Form Example

AJAX Form Example
jq(function(){
// login form
jq('#portal-personaltools a[href$=/login]')
.prepOverlay(
{
subtype: 'ajax',
filter: '#content > *',
formselector: 'form#login_form',
noform: 'reload'
}
);
});

AJAXy Image Example

AJAXy Image Example
jq(function(){
jq('.newsImageContainer a') // trigger
.prepOverlay({
subtype: 'image',
urlmatch: '/image_view_fullscreen$',
urlreplace: '_preview'
});
});

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
• Has helpers that don’t belong in the Plone core

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

Products.pipbox Example

Products.pipbox Example
{
type: 'overlay',
subtype: 'image',
selector: '.newsImageContainer a',
urlmatch: '/image_view_fullscreen$',
urlreplace: '_preview'
}

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

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

tabs.overlays.tooltips.expose
Use it to enhance
—
“With great power comes
not annoy,
great responsibility.”
confuse
Spiderman’s Uncle Ben
or control.