jQuery for Seaside
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,303
On Slideshare
5,258
From Embeds
45
Number of Embeds
3

Actions

Shares
Downloads
39
Comments
0
Likes
3

Embeds 45

http://www.slideshare.net 27
https://twitter.com 9
http://www.slideee.com 9

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 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
  • 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'