jquery in seaside
DESCRIPTION
Seaside Tutorial: JQuery in Seaside by J. Fitzell and L. Renggli. ESUG09, Brest, FranceTRANSCRIPT
![Page 2: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/2.jpg)
‣ John Resig, jquery.com
‣ Lightweight, fast and concise
- Document traversing
- Event Handling
- AJAX Interaction
- Animating
![Page 3: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/3.jpg)
‣ High-level, themeable widgets on top of JQuery.
- Draggable- Droppable- Sortable- Selectable- Resizable - Accordion
- Datepicker- Dialog- Progressbar- Slider- Tabs
![Page 4: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/4.jpg)
T1ooousands of Plugins
![Page 5: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/5.jpg)
For Experts
![Page 6: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/6.jpg)
Forget about
$(document).ready(...)
![Page 7: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/7.jpg)
Don’t care about
“unobtrusive”
![Page 8: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/8.jpg)
For Experts
![Page 9: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/9.jpg)
Say it inSmalltalk
![Page 10: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/10.jpg)
FeatureComplete
![Page 11: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/11.jpg)
Up-to-date
![Page 12: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/12.jpg)
Everythingyou need to know
5 slidesonly
only 5slides
![Page 13: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/13.jpg)
Query + Action
![Page 14: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/14.jpg)
Query + Action
Find DOM
elements
![Page 15: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/15.jpg)
Query + Action
Find DOM
elements
Perform an action
![Page 16: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/16.jpg)
Create a Query
html jQuery: ‘.special’
![Page 17: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/17.jpg)
Create a Query
html jQuery: ‘.special’
Query Languageis CSS
![Page 18: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/18.jpg)
Create a Query
html jQuery: ‘.special’
Smalltak proxy objectJQueryInstanceQuery Language
is CSS
![Page 19: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/19.jpg)
Perform an Action
(html jQuery: ‘div.special’) remove
![Page 20: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/20.jpg)
Perform an Action
(html jQuery: ‘div.special’) remove
... and 180 other(well documented)
actions
![Page 21: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/21.jpg)
Attaching to Element
html anchor onClick: (html jQuery: ‘div’) remove; with: ‘Remove’
![Page 22: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/22.jpg)
Attaching to Element
html anchor onClick: (html jQuery: ‘div’) remove; with: ‘Remove’
(html jQuery this)
Shortcut, seeJQueryClass
![Page 23: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/23.jpg)
At Load-Time
html document addLoadScript: (html jQuery: ‘div’) remove
![Page 24: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/24.jpg)
Query Examples
![Page 25: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/25.jpg)
$(“div.hint”)
html jQuery expression: ‘div.hint’
html jQuery: ‘div.hint’
![Page 26: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/26.jpg)
$(“#foo”)
html jQuery id: ‘foo’
html jQuery: #foo
![Page 27: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/27.jpg)
$(“*”)
html jQuery expression: ‘*’
html jQuery all
![Page 28: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/28.jpg)
$(this)
html jQuery this
html jQuery new
![Page 29: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/29.jpg)
Refine Queries
![Page 30: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/30.jpg)
Siblings
aQuery siblingsaQuery siblings: ‘div’
![Page 31: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/31.jpg)
Next Siblings
aQuery nextaQuery next: ‘div’
aQuery nextAllaQuery nextAll: ‘div’
![Page 32: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/32.jpg)
Previous Siblings
aQuery previousaQuery previous: ‘div’
aQuery prevAllaQuery prevAll: ‘div’
![Page 33: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/33.jpg)
Children
aQuery childrenaQuery children: ‘div’
aQuery contentsaQuery find: ‘div’
![Page 34: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/34.jpg)
Parent
aQuery parentaQuery parent: ‘div’
aQuery parentsaQuery parents: ‘div’
aQuery closestaQuery closest: ‘div’
![Page 35: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/35.jpg)
Perform Actions
![Page 36: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/36.jpg)
Classes
aQuery addClass: ‘foo’aQuery removeClass: ‘foo’aQuery toggleClass: ‘foo’
aQuery hasClass: ‘foo’
![Page 37: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/37.jpg)
Attributes
aQuery attributes: aDictionaryaQuery attributeAt: ‘href’
aQuery attributeAt: ‘href’ put: ‘#’aQuery removeAttribute: ‘href’
![Page 38: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/38.jpg)
Styles
aQuery css: aDictionaryaQuery cssAt: ‘color’
aQuery cssAt: ‘color’ put: ‘#ff0’
![Page 39: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/39.jpg)
Contents
aQuery html: [ :r | r div ]aQuery value: ‘some value’
aQuery text: ‘some text’
![Page 40: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/40.jpg)
Insert Contents
aQuery before: [ :r | r div ]aQuery prepend: [ :r | r div ]aQuery append: [ :r | r div ]
aQuery after: [ :r | r div ]
![Page 41: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/41.jpg)
Replace Contents
aQuery replaceWith: [ :r | r div ]aQuery wrap: [ :r | r div ]
aQuery wrapAll: [ :r | r div ]aQuery wrapInner: [ :r | r div ]
![Page 42: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/42.jpg)
Animations
aQuery showaQuery show: 1 second
aQuery hideaQuery hide: 1 second
![Page 43: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/43.jpg)
Events
aQuery onClick: ‘alert(“Hello”)’aQuery on: ‘click’ do: ‘alert(“Hello”)’
aQuery on: ‘click’ once: ‘alert(“Hello”)’
aQuery trigger: ‘click’
![Page 44: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/44.jpg)
AJAX
![Page 45: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/45.jpg)
AJAX
aQuery load html: [ :r | r div: Time now ]
![Page 46: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/46.jpg)
No Query
html jQuery ajax
![Page 47: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/47.jpg)
Generators
anAjax html: [ :r | r div ]anAjax script: [ :s | s alert: ‘Hello’ ]
![Page 48: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/48.jpg)
Triggering Callbacks
anAjax serialize: aQueryanAjax trigger: [ :p | ... ] passengers: aQuery
anAjax callback: [ :v | ... ] value: anObject
![Page 49: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/49.jpg)
More Information
![Page 50: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/50.jpg)
JQuery Docs
docs.jquery.com
![Page 51: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/51.jpg)
Functional Tests
/seaside/tests/jquery/seaside/tests/jquery-ui
![Page 52: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/52.jpg)
File Libraries
JQDevelopmentLibrary JQuery – Full
JQDeploymentLibrary JQuery – Compressed
JQGoogleLibrary JQuery – Google
JQUiDevelopmentLibrary JQuery UI – Full
JQUiDeploymentLibrary JQuery UI – Compressed
JQUiGoogleLibrary JQuery UI – Google
![Page 53: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/53.jpg)
How To
![Page 54: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/54.jpg)
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 ...'
![Page 55: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/55.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’
![Page 56: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/56.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’
![Page 57: JQuery in Seaside](https://reader034.vdocuments.mx/reader034/viewer/2022052619/5558be77d8b42a7e298b525d/html5/thumbnails/57.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'