Your SlideShare is downloading. ×
0
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
JQuery in Seaside
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

JQuery in Seaside

5,467

Published on

Seaside Tutorial: JQuery in Seaside by J. Fitzell and L. Renggli. ESUG09, Brest, France

Seaside Tutorial: JQuery in Seaside by J. Fitzell and L. Renggli. ESUG09, Brest, France

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,467
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
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. 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
  • 4. T1ooousands of Plugins
  • 5. For Experts
  • 6. Forget about $(document).ready(...)
  • 7. Don’t care about “unobtrusive”
  • 8. For Experts
  • 9. Say it in Smalltalk
  • 10. Feature Complete
  • 11. Up-to-date
  • 12. only 5 slides s l i de 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
  • 50. JQuery Docs docs.jquery.com
  • 51. Functional Tests /seaside/tests/jquery /seaside/tests/jquery-ui
  • 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'

×