jQuery

1
jQuery
From beginner to code slinger in one day CDIA
Scripting for Designers
2
jQuery
Todays agenda

• Design time warm up
• Loading jQuery
• OnLoad
• Selectors (exercise)
• Toggling
• Form calculations
• Work time
• Maybe jQuery UI

3
Design Time
Show us your design feet?
4
Loading jQuery
Calling the mothership

• Hosting on your own server
• Googles API
• - direct link
• - google.load()
• Examples of each

ltscript src"http//www.google.com/jsapi"gtlt/script
gt ltscriptgtgoogle.load("jquery", "1")lt/scriptgt
Download from jQuery.com or Link directly to
Google AJAX Libraries API
5
OnLoad
Wait for it

• Link to jQuery source file
• Link to your own queries (myqueries.js)
• Run once DOM has loaded

(document).ready(function() //Your code
goes here )
Launching Code on Document Ready from jQuery
documentation
6
jQuery Selectors
Go on and get

• element (p").addClass(copy")
• ID (header").addClass(extended")
• class (.external").addClass(highlight")
• multiple (ol, ul").addClass(toggle")
• even, odd (treven").addClass(highlighted)
• contains (licontains(To Do)").addClass(to
  do")
• attributevalue (li.attr(title)").addClass(
  tooltip")

jQuery documentation for selectors
7
jQuery Selectors
Exercise Use jQuery selectors
1. Use http//html-ipsum.com 2. Apply a few
classes to the markup 3. Setup jQuery and an
external .js file 4. Add an active class to
various elements using the jQuery selectors
8
jQuery Toggle Example
Exercise Toggle content via a link

• 1. Use your order form page
• 2. Decide what you want to toggle and how
• 3. Use jQuery to add the toggle behavior to the
  page
• 4. Think about ways we could improve the toggle

9
jQuery Toggle Example
The logic

• Task Toggle content when click on a link
• Hide the content
• Know when link is clicked
• Show content
• Know when link is clicked again
• Either show or hide the content

10
jQuery Toggle Example
The code
Task Toggle content when click on a link
(document).ready(function()
(li).addClass (hidden')
(a.toggle).click(function()
(li).toggleClass(hidden') return
false ) )
11
jQuery Toggle Example
Making it better

• Task Toggle content when click on a link
• Change what the link says
• Add animation to slide
• Use cookies to remember settings (wish we had
  time)

12
jQuery Toggle Example
Making it better
(document).ready(function()
(li).toggle(0) (ullist).prepend(ltpgtlt
a href classtogglegtShowlt/agtlt/pgt)
(a.toggle).click(function()
(li).slideToggle(slow') if
((this).html() Hide Content')
(this).html(Show Content')
else
(this).html(Hide Content')
return false ) )
13
jQuery Toggle Example
Using images
(document).ready(function()
(li).toggle(0) (ullist).prepend(ltpgtlt
a href classtogglegtltimg src"images/down.pn
g" /gtlt/agtlt/pgt) (a.toggle).click(function
() (li).slideToggle(slow')
if ((a.toggle img).attr(src)
images/down.png')
(a.toggle img).attr(src, images/up.png)
else
(a.toggle img).attr(src, images/down.png)
return false ) )