Overlays, Accordions & Tabs, Oh My

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 stuﬀ 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-speciﬁc 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=ﬁrst_name]’);

jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=ﬁrst_name]’); selection = jQuery(‘input [name^=archetypes]’);

jQuery in Brief: Advanced Selectors selection = jQuery(‘input [name=ﬁrst_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’, { // conﬁguration 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 proﬁle

jQuery Tools in Plone: plone.app.jquerytools • Built into Plone 4 • Works with Plone 3 — but must be added by GS extension proﬁle • 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 conﬁgurable: • close • refresh • load another page

AJAX Form Example

AJAX Form Example jq(function(){ // login form jq('#portal-personaltools a[href$=/login]') .prepOverlay( { subtype: 'ajax', ﬁlter: '#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 conﬁguration

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 conﬁgured 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.

Overlays, Accordions & Tabs, Oh My

by Steve McMahon on Nov 03, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 38

Statistics

Overlays, Accordions & Tabs, Oh My Presentation Transcript