• 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
2,962
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
39
Comments
0
Likes
3

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