javascript in plone
DESCRIPTION
Javascript in Plone: What's available, how to use it. (Bling My Plone!)TRANSCRIPT
JavaScript in Plone:What’s available; how to use it
Steve McMahon (SteveM)[email protected]
Plone Conference 2011
JavaScript in Plone:What’s available; how to use it
Steve McMahon (SteveM)[email protected]
Plone Conference 2011
Bling My CMS!
You Are:
Integrators &
Themers
You Are:
You Want:
Widgets
You Want:
WidgetsValidation
You Want:
Widgets
Popups
Validation
You Want:
Widgets
Popups
Validation
Tabs ‘nAccordions
You Want:
Widgets
Popups
DragNDrop
Validation
Tabs ‘nAccordions
You Want:
But first …
But first …
Nuts & Bolts
JS & CSS Injection
Browser Resources❦
Resource Registries
Two Ways
Add-OnPackaging
Two Ways
Themes
Add-OnPackaging
Two Ways
Themes
BrowserLayers
Add-OnPackaging
Browser Layers
BrowserLayers<?xml version="1.0"?>
<layers> <layer name="example.customization.layer" interface="…browser.interfaces.IExampleCustomization" /></layers>
zopeskel.browserlayer[buildout]parts = zopeskel
[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …
zopeskel.browserlayer[buildout]parts = zopeskel
[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …
../bin/zopeskel browserlayer
zopeskel.browserlayer[buildout]parts = zopeskel
[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …
../bin/zopeskel browserlayer
Widgets
HTML5 Widgets
Widgets
HTML5 Widgets(Without HTML5)
Widgets
HTML5 Widgets(Without HTML5)
jQuery Toolsplone.app.jquerytools
Widgets
HTML5 Widgets(Without HTML5)
jQuery Toolsplone.app.jquerytools
dateinput
Widgets
HTML5 Widgets(Without HTML5)
jQuery Toolsplone.app.jquerytools
dateinputvalidation
Activating Optionals
profiles/default/jsregistry.xml
<javascript id="++resource++plone.app.jquerytools.validator.js" enabled="True" /> <javascript id="++resource++plone.app.jquerytools.dateinput.js" enabled="True" />
profiles/default/cssregistry.xml
<stylesheet id="++resource++plone.app.jquerytools.dateinput.css" enabled="1" />
Validation
Munging Old StuffValidation
Validation
Munging Old Stuff
jQuery(function ($) {
// doc read code here; // using $ alias for jQuery
});
Validation
Validation
Munging Old Stuff
jQuery(function ($) {
$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });
Validation
Validation
Munging Old Stuff
jQuery(function ($) {
$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });
Validation
Validation
Munging Old Stuff
jQuery(function ($) {
$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });
Validation
Validation
Munging Old StuffValidation
Validation
Munging Old Stuff
jQuery(function ($) {
$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); $('form.fgBaseEditForm') .validator();
});
Validation
Validation
Munging Old StuffValidation
Validation
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
Popups (Overlays)
Popups
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
Popups (Overlays)
Popups
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });
});
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Popups (Overlays)
Popups
Subtypes: Images AJAX iframeExtensive Form Support!
Tabs ’N Accordions
Tabs ‘nAccordions
Tabs and Accordions:Pretty much the same thing!
Tabs ’N Accordions
Tabs ‘nAccordions
Tabs and Accordions:Pretty much the same thing!
jQuery Tools .tab()handles both.
Tabs ’N Accordions
Tabs ‘nAccordions
Tabs and Accordions:Pretty much the same thing!
jQuery Tools .tab()handles both.
http://flowplayer.org/tools/
Tabs ’N Accordions
Tabs ‘nAccordions
$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});
Tabs ’N Accordions
Tabs ‘nAccordions
$(‘container’).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});
Tabs ’N Accordions
Tabs ‘nAccordions
$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});
Tabs ’N Accordions
Tabs ‘nAccordions
$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});
Tabs ’N Accordions
Tabs ‘nAccordions
$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});
Tabs ’N Accordions
Tabs ‘nAccordions
Tabs ’N Accordions
Tabs ‘nAccordions
Tabs ’N Accordions
Tabs ‘nAccordions
$('#portal-column-two dl.portlet') .each(function() { $(this) .children('dd') .wrapAll( '<dd class="portletContent"><dl /></dd>' );});
Fixing a Typical Gotcha
Tabs ’N Accordions
Tabs ‘nAccordions
$('#portal-column-two') .tabs( '#portal-column-two dd.portletContent', { tabs: 'dl.portlet dt.portletHeader a', effect: 'slide' } );
Activating the Accordion
Drag ’N Drop
DragNDrop
Drag ’N Drop
DragNDrop
Drag ’N Drop
DragNDrop
jQuery UI• draggable• droppable• sortable
Drag ’N Drop
DragNDrop collective.js.jqueryui
jQuery UI• draggable• droppable• sortable
Credits
bling_guy: by-nc-sa/2.0 http://www.flickr.com/photos/prawnpie/
bling_camera: by-nc-sa/2.0 http://www.flickr.com/photos/eleven/
bling_calculator: by-nc-sa/2.0 http://www.flickr.com/photos/mundoo/
bling_tshirt: by-nc-sa/2.0 http://www.flickr.com/photos/thewavingcat/
bling_dog: by-nc-sa/2.0 http://www.flickr.com/photos/splat/
bling_sunglasses: by-nc/2.0 http://www.flickr.com/photos/red-bubble/
bling_beer: by-nc-sa/2.0 http://www.flickr.com/photos/johnandchristina/
bling_dummy: by-nc-sa/2.0 http://www.flickr.com/photos/mark_w/
bling_cycle: by/2.0 http://www.flickr.com/photos/ketaiblogger/
bling_vespa: by-nc-sa/2.0 http://www.flickr.com/photos/lorena-david/
bling_mouse: by-nc-sa/2.0 kelly onassis
bling_desktop: by-nc-sa/2.0 http://www.flickr.com/photos/marblegravy/
bling_cat: by-nc-sa/2.0 http://www.flickr.com/photos/nicora/
bling_engine: by-nc-sa/2.0 http://www.flickr.com/photos/rpt/