Javascript in Plone

1. JavaScript in Plone: What’s available; how to use it Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011

2. CM S! g M y JavaScript in Plone: What’s available; how to use it B li n Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011

3. You Are:

4. You Are: rs & ra to I nt eg rs em e Th

5. You Want:

6. You Want: Widgets

7. You Want: Validation Widgets

8. You Want: Popups Validation Widgets

9. You Want: Popups Validation Widgets Tabs ‘n Accordions

10. You Want: Popups Validation Widgets Tabs ‘n Accordions DragNDrop

11. But ﬁrst …

12. But ﬁrst … Nuts & Bolts

13. JS & CSS Injection Browser Resources ❦ Resource Registries

14. Two Ways Add-On Packaging

15. Two Ways Add-On Packaging Themes

16. Two Ways Add-On Browser Packaging Layers Themes

17. Browser Layers Browser <?xml version="1.0"?> <layers> <layer Layers name="example.customization.layer" interface="…browser.interfaces.IExampleCustomization" /> </layers>

18. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …

19. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer … ../bin/zopeskel browserlayer

20. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer … ../bin/zopeskel browserlayer

21. HTML5 Widgets Widgets

22. HTML5 Widgets (Without HTML5) Widgets

23. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools Widgets

24. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinput Widgets

25. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinput validation Widgets

26. Activating Optionals proﬁles/default/jsregistry.xml <javascript id="++resource++plone.app.jquerytools.validator.js" enabled="True" /> <javascript id="++resource++plone.app.jquerytools.dateinput.js" enabled="True" /> proﬁles/default/cssregistry.xml <stylesheet id="++resource++plone.app.jquerytools.dateinput.css" enabled="1" /> Validation

27. Munging Old Stuff Validation Validation

28. Munging Old Stuff Validation jQuery(function ($) { // doc read code here; // using $ alias for jQuery }); Validation

29. Munging Old Stuff Validation jQuery(function ($) { $('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); }); Validation

33. Munging Old Stuff Validation jQuery(function ($) { $('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); $('form.fgBaseEditForm') .validator(); }); Validation

35. Popups (Overlays) Popups

43. Popups (Overlays) <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

46. Popups (Overlays) jQuery(function ($) { $('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' }); }); Popups

55. Popups (Overlays) Subtypes: Images AJAX iframe Extensive Form Support! Popups

56. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! Tabs ‘n Accordions

57. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. Tabs ‘n Accordions

58. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. http://ﬂowplayer.org/tools/ Tabs ‘n Accordions

59. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘n Accordions

60. Tabs ’N Accordions $(‘container’).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘n Accordions

64. Tabs ’N Accordions Tabs ‘n Accordions

65. Tabs ’N Accordions Tabs ‘n Accordions

66. Tabs ’N Accordions Fixing a Typical Gotcha $('#portal-column-two dl.portlet') .each(function() { $(this) .children('dd') .wrapAll( '<dd class="portletContent"><dl /></dd>' ); }); Tabs ‘n Accordions

67. Tabs ’N Accordions Activating the Accordion $('#portal-column-two') .tabs( '#portal-column-two dd.portletContent', { tabs: 'dl.portlet dt.portletHeader a', effect: 'slide' } ); Tabs ‘n Accordions

68. Drag ’N Drop DragNDrop

69. Drag ’N Drop DragNDrop

70. Drag ’N Drop jQuery UI • draggable • droppable • sortable DragNDrop

71. Drag ’N Drop jQuery UI • draggable • droppable • sortable DragNDrop collective.js.jqueryui

72. 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/

Javascript in Plone

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Javascript in Plone

Semelhante a Javascript in Plone (20)

Mais de Steve McMahon

Mais de Steve McMahon (6)

Último

Último (20)

Javascript in Plone