jQuery for Seaside
3 likes1,823 views
This document provides an overview of jQuery in 5 slides. It introduces jQuery and its core features including document traversing, event handling, AJAX interaction, and animating. It also discusses jQuery UI which provides high-level widgets. Common queries, actions, and how to attach behaviors to elements are demonstrated. The document also briefly covers plugins, unobtrusive coding, and other advanced topics.
![Contents
aQuery html: [ :r | r div ]
aQuery value: ‘some value’
aQuery text: ‘some text’](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-39-320.jpg)
![Insert Contents
aQuery before: [ :r | r div ]
aQuery prepend: [ :r | r div ]
aQuery append: [ :r | r div ]
aQuery after: [ :r | r div ]](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-40-320.jpg)
![Replace Contents
aQuery replaceWith: [ :r | r div ]
aQuery wrap: [ :r | r div ]
aQuery wrapAll: [ :r | r div ]
aQuery wrapInner: [ :r | r div ]](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-41-320.jpg)
![AJAX
aQuery load html: [ :r | r div: Time now ]](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-45-320.jpg)
![Generators
anAjax html: [ :r | r div ]
anAjax script: [ :s | s alert: ‘Hello’ ]](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-47-320.jpg)
![Triggering Callbacks
anAjax serialize: aQuery
anAjax trigger: [ :p | ... ] passengers: aQuery
anAjax callback: [ :v | ... ] value: anObject](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-48-320.jpg)
![Replace a Component
html div
id: (id := html nextId);
with: child.
html anchor
onClick: ((html jQuery id: id) load
html: [ :r |
child := OtherComponent new;
r render: child ]);
with: ‘Change Component’](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-55-320.jpg)
![Update Multiple Elements
html div id: #date.
html div id: #time.
html anchor
onClick: (html jQuery ajax script: [ :s |
s << (s jQuery: #date)
html: [ :r | r render: Date today ].
s << (s jQuery: #time)
html: [ :r | r render: Time now ] ]);
with: ‘Update’](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-56-320.jpg)
![Display a Lightbox
| id |
html div
id: (id := html nextId);
script: (html jQuery new dialog
title: 'Lightbox Dialog';
overlay: (Dictionary new
at: 'background-color' put: '#000';
at: 'opacity' put: 0.75;
yourself);
modal: true);
with: [ self renderDialogOn: html ]
html anchor
onClick: (html jQuery id: id) dialog open;
with: 'Open Lightbox'](https://image.slidesharecdn.com/jquery-090903091547-phpapp02/85/jQuery-for-Seaside-57-320.jpg)
jQuery for Seaside
- 1. for Lukas Renggli ESUG 2009, Brest
- 2. ‣ John Resig, jquery.com ‣ Lightweight, fast and concise - Document traversing - Event Handling - AJAX Interaction - Animating
- 3. ‣ High-level, themeable widgets on top of JQuery. - Draggable - Datepicker - Droppable - Dialog - Sortable - Progressbar - Selectable - Slider - Resizable - Tabs - Accordion
- 5. For Experts
- 7. Don’t care about “unobtrusive”
- 8. For Experts
- 10. Feature Complete
- 11. Up-to-date
- 12. only 5 slides s l ide 5 only s Everything you need to know
- 13. Query + Action
- 14. OM nd D s Fi e le m e nt Query + Action
- 15. OM nd D s Fi e le m e nt Query + Action Pe r fo r m a n a ct i o n
- 16. Create a Query html jQuery: ‘.special’
- 17. Create a Query html jQuery: ‘.special’ Q uer y La ng uage is C S S
- 18. Create a Query html jQuery: ‘.special’ S m a l lt a k p ro Q uer y La ng uage x y o bje ct JQ u e r yI n st a is C S S nce
- 19. Perform an Action (html jQuery: ‘div.special’) remove
- 20. Perform an Action (html jQuery: ‘div.special’) remove . . . a nd 1 80 ot h e r (we l l do c u m e nte d) a ctio n s
- 21. Attaching to Element html anchor onClick: (html jQuery: ‘div’) remove; with: ‘Remove’
- 22. Attaching to Element html anchor onClick: (html jQuery:this) jQuery ‘div’) remove; with: ‘Remove’ Sh o r tc u t, se e JQuer yC l a s s
- 23. At Load-Time html document addLoadScript: (html jQuery: ‘div’) remove
- 24. Query Examples
- 25. $(“div.hint”) html jQuery expression: ‘div.hint’ html jQuery: ‘div.hint’
- 26. $(“#foo”) html jQuery id: ‘foo’ html jQuery: #foo
- 27. $(“*”) html jQuery expression: ‘*’ html jQuery all
- 28. $(this) html jQuery this html jQuery new
- 29. Refine Queries
- 30. Siblings aQuery siblings aQuery siblings: ‘div’
- 31. Next Siblings aQuery next aQuery next: ‘div’ aQuery nextAll aQuery nextAll: ‘div’
- 32. Previous Siblings aQuery previous aQuery previous: ‘div’ aQuery prevAll aQuery prevAll: ‘div’
- 33. Children aQuery children aQuery children: ‘div’ aQuery contents aQuery find: ‘div’
- 34. Parent aQuery parent aQuery parent: ‘div’ aQuery parents aQuery parents: ‘div’ aQuery closest aQuery closest: ‘div’
- 35. Perform Actions
- 36. Classes aQuery addClass: ‘foo’ aQuery removeClass: ‘foo’ aQuery toggleClass: ‘foo’ aQuery hasClass: ‘foo’
- 37. Attributes aQuery attributes: aDictionary aQuery attributeAt: ‘href’ aQuery attributeAt: ‘href’ put: ‘#’ aQuery removeAttribute: ‘href’
- 38. Styles aQuery css: aDictionary aQuery cssAt: ‘color’ aQuery cssAt: ‘color’ put: ‘#ff0’
- 39. Contents aQuery html: [ :r | r div ] aQuery value: ‘some value’ aQuery text: ‘some text’
- 40. Insert Contents aQuery before: [ :r | r div ] aQuery prepend: [ :r | r div ] aQuery append: [ :r | r div ] aQuery after: [ :r | r div ]
- 41. Replace Contents aQuery replaceWith: [ :r | r div ] aQuery wrap: [ :r | r div ] aQuery wrapAll: [ :r | r div ] aQuery wrapInner: [ :r | r div ]
- 42. Animations aQuery show aQuery show: 1 second aQuery hide aQuery hide: 1 second
- 43. Events aQuery onClick: ‘alert(“Hello”)’ aQuery on: ‘click’ do: ‘alert(“Hello”)’ aQuery on: ‘click’ once: ‘alert(“Hello”)’ aQuery trigger: ‘click’
- 44. AJAX
- 45. AJAX aQuery load html: [ :r | r div: Time now ]
- 46. No Query html jQuery ajax
- 47. Generators anAjax html: [ :r | r div ] anAjax script: [ :s | s alert: ‘Hello’ ]
- 48. Triggering Callbacks anAjax serialize: aQuery anAjax trigger: [ :p | ... ] passengers: aQuery anAjax callback: [ :v | ... ] value: anObject
- 49. More Information
- 52. File Libraries JQDevelopmentLibrary JQuery – Full JQDeploymentLibrary JQuery – Compressed JQGoogleLibrary JQuery – Google JQUiDevelopmentLibrary JQuery UI – Full JQUiDeploymentLibrary JQuery UI – Compressed JQUiGoogleLibrary JQuery UI – Google
- 53. How To
- 54. Click and Show html anchor onClick: (html jQuery: 'div.help') toggle; with: 'About jQuery'. html div class: 'help'; style: 'display: none'; with: 'jQuery is a fast and ...'
- 55. Replace a Component html div id: (id := html nextId); with: child. html anchor onClick: ((html jQuery id: id) load html: [ :r | child := OtherComponent new; r render: child ]); with: ‘Change Component’
- 56. Update Multiple Elements html div id: #date. html div id: #time. html anchor onClick: (html jQuery ajax script: [ :s | s << (s jQuery: #date) html: [ :r | r render: Date today ]. s << (s jQuery: #time) html: [ :r | r render: Time now ] ]); with: ‘Update’
- 57. Display a Lightbox | id | html div id: (id := html nextId); script: (html jQuery new dialog title: 'Lightbox Dialog'; overlay: (Dictionary new at: 'background-color' put: '#000'; at: 'opacity' put: 0.75; yourself); modal: true); with: [ self renderDialogOn: html ] html anchor onClick: (html jQuery id: id) dialog open; with: 'Open Lightbox'