Your SlideShare is downloading. ×
Javascript in Plone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript in Plone

1,786
views

Published on

Javascript in Plone: What's available, how to use it. (Bling My Plone!)

Javascript in Plone: What's available, how to use it. (Bling My Plone!)

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,786
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 itB li n Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011
  • 3. You Are:
  • 4. You Are: rs & ra toI 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 ‘nAccordions
  • 10. You Want: Popups Validation Widgets Tabs ‘nAccordions DragNDrop
  • 11. But first …
  • 12. But first …Nuts & Bolts
  • 13. JS & CSS InjectionBrowser Resources ❦Resource Registries
  • 14. Two Ways Add-OnPackaging
  • 15. Two Ways Add-OnPackaging Themes
  • 16. Two Ways Add-On BrowserPackaging 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 WidgetsWidgets
  • 22. HTML5 Widgets (Without HTML5)Widgets
  • 23. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytoolsWidgets
  • 24. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinputWidgets
  • 25. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinput validationWidgets
  • 26. 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
  • 27. Munging Old Stuff ValidationValidation
  • 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
  • 30. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  • 31. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  • 32. Munging Old Stuff ValidationValidation
  • 33. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); $(form.fgBaseEditForm) .validator(); });Validation
  • 34. Munging Old Stuff ValidationValidation
  • 35. Popups (Overlays)Popups
  • 36. Popups (Overlays)Popups
  • 37. Popups (Overlays)Popups
  • 38. Popups (Overlays)Popups
  • 39. Popups (Overlays)Popups
  • 40. Popups (Overlays)Popups
  • 41. Popups (Overlays)Popups
  • 42. 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
  • 44. 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
  • 45. 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
  • 47. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  • 48. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  • 49. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  • 50. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  • 51. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  • 52. Popups (Overlays)Popups
  • 53. Popups (Overlays)Popups
  • 54. Popups (Overlays)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 ‘nAccordions
  • 57. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. Tabs ‘nAccordions
  • 58. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. http://flowplayer.org/tools/ Tabs ‘nAccordions
  • 59. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  • 60. Tabs ’N Accordions $(‘container’).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  • 61. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  • 62. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  • 63. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  • 64. Tabs ’N Accordions Tabs ‘nAccordions
  • 65. Tabs ’N Accordions Tabs ‘nAccordions
  • 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 ‘nAccordions
  • 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 ‘nAccordions
  • 68. Drag ’N DropDragNDrop
  • 69. Drag ’N DropDragNDrop
  • 70. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop
  • 71. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop collective.js.jqueryui
  • 72. Creditsbling_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 onassisbling_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/

×