Overlays, Accordions & Tabs, Oh My
Upcoming SlideShare
Loading in...5
×
 

Overlays, Accordions & Tabs, Oh My

on

  • 6,290 views

Using JQuery Tools for DOM Windows in Plone

Using JQuery Tools for DOM Windows in Plone

Statistics

Views

Total Views
6,290
Views on SlideShare
6,252
Embed Views
38

Actions

Likes
2
Downloads
47
Comments
0

1 Embed 38

http://www.slideshare.net 38

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Overlays, Accordions & Tabs, Oh My Overlays, Accordions & Tabs, Oh My Presentation Transcript

  • 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.