for Lukas Renggli ESUG 2009, Brest

Size: px

Start display at page:

Download "for Lukas Renggli ESUG 2009, Brest"

Abraham Morrison
6 years ago
Views:

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 - Droppable - Sortable - Selectable - Resizable - Accordion - Datepicker - Dialog - Progressbar - Slider - Tabs

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 5 slides only only 5 slides Everything you need to know

13 Query + Action

14 Find DOM elements Query + Action

15 Find DOM elements Query + Action Perform an action

16 Create a Query html jquery:.special

17 Create a Query html jquery:.special Query Language is CSS

18 Create a Query html jquery:.special Smalltak proxy object JQueryInstance Query Language is CSS

19 Perform an Action (html jquery: div.special ) remove

20 Perform an Action (html jquery: div.special ) remove... and 180 other (well documented) actions

21 Attaching to Element html anchor onclick: (html jquery: div ) remove; with: Remove

22 Attaching to Element html anchor onclick: (html jquery: this) div ) remove; with: Remove Shortcut, see JQueryClass

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 JQDeploymentLibrary JQGoogleLibrary JQUiDevelopmentLibrary JQUiDeploymentLibrary JQUiGoogleLibrary JQuery Full JQuery Compressed JQuery Google JQuery UI Full JQuery UI Compressed 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'

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3 Introduction xix Part I: jquery API 1 Chapter 1: Introduction to jquery 3 What Does jquery Do for Me? 4 Who Develops jquery? 5 Obtaining jquery 5 Installing jquery 5 Programming Conventions 8 XHTML and