Contenu connexe Similaire à Javascript in Plone (20) Plus de Steve McMahon (6) Javascript in Plone2. 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
4. You Are:
rs &
ra to
I nt eg rs
em e
Th
13. JS & CSS Injection
Browser Resources
❦
Resource Registries
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
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
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
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
33. Munging Old Stuff
Validation
jQuery(function ($) {
$('form.fgBaseEditForm span.required')
.parents('div.field')
.children(':input')
.attr('required','required');
$('form.fgBaseEditForm')
.validator();
});
Validation
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
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://flowplayer.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
61. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions
62. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions
63. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
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
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/