Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Javascript in Plone

2 909 vues

Publié le

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

Publié dans : Technologie
  • ⇒ www.WritePaper.info ⇐ This service will write as best as they can. So you do not need to waste the time on rewritings.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • God bless you Ted. You saved me tons of money. I almost went to bought an overpriced side table until I saw your plans. Thanks for all the great ideas. It's gonna keep me occupied for a long time :) ●●● https://t.cn/A62Ye5eM
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Get access to 16,000 woodworking plans. ✄✄✄ https://url.cn/xFeBN0O4
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • This is your last chance to grab all 16,000 plans at this discount price. I've been told that Ted will only extend this offer until midnight tonight and this offer will NOT be repeated again. =>> https://t.cn/A62YeZUX
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

Javascript in Plone

  1. 1. JavaScript in Plone:What’s available; how to use it Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011
  2. 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. 3. You Are:
  4. 4. You Are: rs & ra toI nt eg rs em e Th
  5. 5. You Want:
  6. 6. You Want: Widgets
  7. 7. You Want:Validation Widgets
  8. 8. You Want:Popups Validation Widgets
  9. 9. You Want: Popups Validation Widgets Tabs ‘nAccordions
  10. 10. You Want: Popups Validation Widgets Tabs ‘nAccordions DragNDrop
  11. 11. But first …
  12. 12. But first …Nuts & Bolts
  13. 13. JS & CSS InjectionBrowser Resources ❦Resource Registries
  14. 14. Two Ways Add-OnPackaging
  15. 15. Two Ways Add-OnPackaging Themes
  16. 16. Two Ways Add-On BrowserPackaging Layers Themes
  17. 17. Browser Layers Browser<?xml version="1.0"?><layers> <layer Layers name="example.customization.layer" interface="…browser.interfaces.IExampleCustomization" /></layers>
  18. 18. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …
  19. 19. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …../bin/zopeskel browserlayer
  20. 20. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …../bin/zopeskel browserlayer
  21. 21. HTML5 WidgetsWidgets
  22. 22. HTML5 Widgets (Without HTML5)Widgets
  23. 23. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytoolsWidgets
  24. 24. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinputWidgets
  25. 25. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinput validationWidgets
  26. 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. 27. Munging Old Stuff ValidationValidation
  28. 28. Munging Old Stuff Validation jQuery(function ($) { // doc read code here; // using $ alias for jQuery });Validation
  29. 29. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  30. 30. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  31. 31. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  32. 32. Munging Old Stuff ValidationValidation
  33. 33. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); $(form.fgBaseEditForm) .validator(); });Validation
  34. 34. Munging Old Stuff ValidationValidation
  35. 35. Popups (Overlays)Popups
  36. 36. Popups (Overlays)Popups
  37. 37. Popups (Overlays)Popups
  38. 38. Popups (Overlays)Popups
  39. 39. Popups (Overlays)Popups
  40. 40. Popups (Overlays)Popups
  41. 41. Popups (Overlays)Popups
  42. 42. Popups (Overlays)Popups
  43. 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. 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. 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. 46. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  47. 47. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  48. 48. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  49. 49. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  50. 50. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  51. 51. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  52. 52. Popups (Overlays)Popups
  53. 53. Popups (Overlays)Popups
  54. 54. Popups (Overlays)Popups
  55. 55. Popups (Overlays) Subtypes: Images AJAX iframe Extensive Form Support!Popups
  56. 56. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! Tabs ‘nAccordions
  57. 57. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. Tabs ‘nAccordions
  58. 58. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. http://flowplayer.org/tools/ Tabs ‘nAccordions
  59. 59. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  60. 60. Tabs ’N Accordions $(‘container’).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  61. 61. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  62. 62. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  63. 63. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  64. 64. Tabs ’N Accordions Tabs ‘nAccordions
  65. 65. Tabs ’N Accordions Tabs ‘nAccordions
  66. 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. 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. 68. Drag ’N DropDragNDrop
  69. 69. Drag ’N DropDragNDrop
  70. 70. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop
  71. 71. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop collective.js.jqueryui
  72. 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/

×