intro to jquery nysforum
TRANSCRIPT
![Page 1: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/1.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 1/48
Webmasters' Guild
Friday, June 4, 2010
![Page 2: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/2.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 2/48
Webmasters' Guild
Friday, June 4, 2010
PollPollPollPoll
![Page 3: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/3.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 3/48
Webmasters' Guild
Friday, June 4, 2010
Just Thought you should know
![Page 4: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/4.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 4/48
Webmasters' Guild
Friday, June 4, 2010
Eric SteinbornEric Steinborn
IT2P @ NYS Division of Criminal Justice Services since 2006
15+ years experience with web technologies
Work in a group of 3
± Maintain our intranet (DCJSnet)
± Help with internet and extranet sites
A few things I'm awesome at are:
CSS, JavaScript, Interactivity, Prog Enhancement, UX, SEO, Accessibility
I do what I love -> I love my job!
![Page 5: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/5.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 5/48
Webmasters' Guild
Friday, June 4, 2010
What is jQuery?
�jQuery is an Open-Source JavaScript framework thatsimplifies cross-browser client side scripting.
� Animations
� DOM manipulation
� AJAX
� Extensibility through plugins
�jQuery was created by John Resig and released 01/06
�Most current release is 1.4.2 (2/19/10)
A Little Bit About jQuery A Little Bit About jQuery
![Page 6: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/6.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 6/48
Webmasters' Guild
Friday, June 4, 2010
Why should you use it?
�Easy to learn! It uses CSS syntax for selection
�Its tiny 71KB (24KB, minified and Gzipped )
�Documented api.jquery.com & Supported forum.jquery.com
�Cross browser compatibility: IE 6+, FF 2+
�It is the most used JavaScript library on the web today
� 39% of all sites that use JavaScript use jQuery.� trends.builtwith.com/javascript/JQuery <- See, I'm not a liar..
A Little Bit About jQuery A Little Bit About jQuery
![Page 7: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/7.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 7/48
Webmasters' Guild
Friday, June 4, 2010
I <3 The jQuery CommunityI <3 The jQuery Community
![Page 8: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/8.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 8/48
Webmasters' Guild
Friday, June 4, 2010
![Page 9: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/9.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 9/48
Webmasters' Guild
Friday, June 4, 2010
PWNS All Other FrameworksPWNS All Other Frameworks
![Page 10: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/10.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 10/48
Webmasters' Guild
Friday, June 4, 2010
Who Uses jQuery?Who Uses jQuery?
Google Amazon IBM
Microsoft Twitter Dell
docs.jquery.com/Sites_Using_jQuery
![Page 11: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/11.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 11/48
Webmasters' Guild
Friday, June 4, 2010
Who Uses jQuery In NY?Who Uses jQuery In NY?
Alcoholism&
Substance AbuseCIO OFT Criminal Justice
Labor MTA Port Authority
![Page 12: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/12.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 12/48
Webmasters' Guild
Friday, June 4, 2010
What is the DOM?What is the DOM?
Document Object Model (DOM):noun
Blah blah blah long definition
that makes little sense«.
![Page 13: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/13.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 13/48
Webmasters' Guild
Friday, June 4, 2010
What Is The DOM?What Is The DOM?
Long story short, the DOM is your html document code. From the
<!DOCTYPE> to the </html>
The DOM is loaded top to bottom, so include your scripts at the bottom
of the page for best performance.
The DOM is "ready" when everything on the page has loaded.
� Stylesheets� JavaScripts
� Images
![Page 14: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/14.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 14/48
Webmasters' Guild
Friday, June 4, 2010
Wait!!Wait!!
In order to make sure that jQuery can find the element you asked it for,your browser needs to have loaded it (the DOM needs to be ready).
Q. How can I be sure my code runs at DOM ready?
A. Wr ap all your jQuer y code with the document r eady function:
$(document).ready(function(){
// inser t sweet, sweet jQuer y code her e«
});
![Page 15: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/15.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 15/48
Webmasters' Guild
Friday, June 4, 2010
And What If I Don't And What If I Don't WannaWanna, Huh?, Huh?
1. Code doesn't work, throws an error (90%)
2. Code works« this page load, next page load see #1. (~9%)
3. Code opens a worm hole that transports your page back to 1990revolutionizing the Web as we know it. While seemingly great, italso creates a paradox and destroys the universe. * (<1%)
*(has yet to be fully verified)
1 of 3 things will happen:
![Page 16: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/16.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 16/48
Webmasters' Guild
Friday, June 4, 2010
We get it Eric, you're a geek«We get it Eric, you're a geek«Get to the jQuery already!Get to the jQuery already!
Your about ta get a wedgie NERD!**spelling intentional
Your about ta get a wedgie NERD!**spelling intentional
![Page 17: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/17.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 17/48
Webmasters' Guild
Friday, June 4, 2010
Loading jQueryLoading jQuery
In order to use jQuery you need to load it.
You can include it locally on your own server:
± <script src="/js/jquery.js">
Or use one of the CDN's made available:
± ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
± ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
± CDN's are Gzipped and minified
![Page 18: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/18.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 18/48
Webmasters' Guild
Friday, June 4, 2010
Load Scripts At The BottomLoad Scripts At The Bottom
Problem:
W hen sc r ipts ar e downloading they block ever ything else in almost all br owser s!
Solution:
Best pr actice: Load your sc r ipts at the bottom of your page so they don't interr upt
page content downloads.
![Page 19: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/19.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 19/48
Webmasters' Guild
Friday, June 4, 2010
And BOOM! Goes The Dynamite. And BOOM! Goes The Dynamite.
Html:
<p>Hello World! I'm Eric</p>Script:
$(function(){
$("p").addClass("isCool"); //keep telling your self that..
});
Resulting html:
<p class="isCool">Hello World! I'm Eric</p>
jsbin.com/ecayo3/18#slide19
![Page 20: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/20.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 20/48
Webmasters' Guild
Friday, June 4, 2010
Break It Down Now!Break It Down Now!
$(function(){// = $(document).ready(function(){
});
$
Initiatesthe jQueryfunction
$
= jQuery
("p")
Grabs a D elementusin a selector.
elector is in quotes.
reates a jQuery³ ollection´
<p>
.add lass("is ool");
Built in method that adds a
class to the jQueryollection
lass is in quotes.
ends with a semicolon.
![Page 21: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/21.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 21/48
Webmasters' Guild
Friday, June 4, 2010
All Your Basic Selectors Are Belong To Us All Your Basic Selectors Are Belong To Us
Uses the same syntax you use to style elements in CSS!
$("p")
$("p")
<p>
$("div")$("div")
<div>
$("#foo")$("#foo")
id="foo"
$(".foo")$(".foo")
class="foo"
api.jquery.com/category/selectors/
![Page 22: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/22.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 22/48
Webmasters' Guild
Friday, June 4, 2010
Get Classy <p>Get Classy <p>
jQuery:
$("p").addClass("sophisticated");
Before:<p>
After:
<p class="sophisticated">
jsbin.com/ecayo3/18#slide22
![Page 23: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/23.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 23/48
Webmasters' Guild
Friday, June 4, 2010
This <p> Has No Class At All!This <p> Has No Class At All!
jQuery:
$("p").removeClass("sophisticated");
Before:<p class="sophisticated">
After:
<p class="">
jsbin.com/ecayo3/18#slide22
![Page 24: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/24.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 24/48
Webmasters' Guild
Friday, June 4, 2010
<div> Hide and Seek<div> Hide and Seek
jQuery:
$("div").show();
Before:<div style="display:none;">
After:
<div style="display:block;">
jsbin.com/ecayo3/18#slide24
![Page 25: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/25.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 25/48
Webmasters' Guild
Friday, June 4, 2010
I¶m Not Lame, Am I?I¶m Not Lame, Am I?
jQuery:
$("#eric").text("Is Cool");
Before:<p id="eric">Is Lame</p>
After:
<p id="eric">Is Cool</p>
jsbin.com/ecayo3/18#slide25
![Page 26: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/26.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 26/48
Webmasters' Guild
Friday, June 4, 2010
You Can Chain Most Methods Together You Can Chain Most Methods Together
$("p")
.addClass("sophisticated")
.text("Hello World!")
.show();
jsbin.com/ecayo3/18#slide26
![Page 27: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/27.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 27/48
Webmasters' Guild
Friday, June 4, 2010
Click Events Are Awesome!Click Events Are Awesome!
$("#eric").click(function(){
$(this).text("Is Cool"); // this = #er ic
alert("Take that High School!");
});
$("#eric").click(function(event){
$(this).text("Is Cool"); // this = #er ic alert("Take that High School!");
event.preventDefault(); //P r events default action
});
jsbin.com/ecayo3/18#slide27
![Page 28: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/28.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 28/48
Webmasters' Guild
Friday, June 4, 2010
Some of Basic MethodsSome of Basic Methods
� Show a hidden element.show()
� wrap an element with <a>.wrap("<a></a>")
� Select parent <p>.parent("p")
� Get/Set inner M.html()
� Get/Set Value.val()
api.jquery.com/
![Page 29: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/29.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 29/48
Webmasters' Guild
Friday, June 4, 2010
Getters and SettersGetters and SettersGetters and SettersGetters and Setters
![Page 30: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/30.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 30/48
Webmasters' Guild
Friday, June 4, 2010
Dual Purpose MethodsDual Purpose Methods
$(" foo").te t(); $(" foo").te t("foo");
![Page 31: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/31.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 31/48
Webmasters' Guild
Friday, June 4, 2010
Use jQuery To GetUse jQuery To Get
<p>Eric</p>
� === "Eric"$("p").text();
� myVar === "Eric"myVar = $("p").text();
![Page 32: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/32.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 32/48
Webmasters' Guild
Friday, June 4, 2010
Use jQuery To SetUse jQuery To Set
<p>Eric</p>
� <p>BoBeric</p>$("p").text("BoBeric");
� myVar === "BoBeric"<p>BoBeric</p>myVar = "BoBeric";$("p").text(myVar );
![Page 33: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/33.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 33/48
Webmasters' Guild
Friday, June 4, 2010
Questions?Questions?
![Page 34: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/34.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 34/48
Webmasters' Guild
Friday, June 4, 2010
PluginsPluginsPluginsPlugins
![Page 35: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/35.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 35/48
Webmasters' Guild
Friday, June 4, 2010
Viva Variety!Viva Variety!
³If you want to create an animation, effect or UI component, chancesare pretty good that someone has done your work for you already.´
-Er ic Steinbor n 2010
plugins.jquery.com
![Page 36: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/36.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 36/48
Webmasters' Guild
Friday, June 4, 2010
I Will Be Covering These PluginsI Will Be Covering These Plugins
� Slideshow pluginColorBox
� Table formatting & row sortingtablesorter
� Filter long listsListNav
![Page 37: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/37.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 37/48
Webmasters' Guild
Friday, June 4, 2010
That's Just Typical..That's Just Typical..
1. Download the plugin from its site.
± Depending on the plugin you can have 1 or more files to install.
2. Copy the plugin, and any of its dependencies to your server.
3. If needed call css <link href="plugincss.css" />
4. Call jQuery <script src="jQuery.js">
5. Call the plugin <script src"jQuery.pluginname.js">
6. Initialize plugin $("#mypluginContainer ").pluginInit();
![Page 38: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/38.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 38/48
Webmasters' Guild
Friday, June 4, 2010
GoGo--GoGo--Get ColorBox!Get ColorBox!
Go to colorpowered.com/colorbox/
This is what you'll get
![Page 39: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/39.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 39/48
Webmasters' Guild
Friday, June 4, 2010
GoGo--GoGo--Install ColorBox!Install ColorBox!
Extract min.js to my "/js/plugins/" folder
I like example 2 so I'll extract
These to my /css/ folder
![Page 40: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/40.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 40/48
Webmasters' Guild
Friday, June 4, 2010
GoGo--GoGo--Prep ColorBox!Prep ColorBox!
In the <head> type:
<link rel="stylesheet" href="css/colorbox.css" media="screen" />
In the <body> type:
<a href="unicorn.jpg" rel="colorbox"><img src="unicorn-t.jpg" /></a><a href="rainbows.jpg" rel="colorbox"><img src="rainbows-t.jpg" /></a>
<a href="sparkles.jpg" rel="colorbox"><img src="sparkles-t.jpg" /></a>
Before the ending </body> type:
<script type="text/javascipt" src="js/jquery.js"></script><script type="text/javascipt" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascipt"></script>
![Page 41: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/41.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 41/48
Webmasters' Guild
Friday, June 4, 2010
GoGo--GoGo--Gadget ColorBox!Gadget ColorBox!
Inside the empty <script> tag I just entered I'll init ColorBox
<script>
$(function(){
$("a[rel='colorbox']").colorbox();
});
</script>
Now anytime I click on a thumbnail, I¶ll see a ColorBox with my image in it.
![Page 42: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/42.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 42/48
Webmasters' Guild
Friday, June 4, 2010
GoGo--GoGo--Cut It Out Already!Cut It Out Already!
Set custom options for ColorBox like this:
$("a[rel='colorbox']").colorbox({
slideshow: true, // shows all your images in sequence
slideshowSpeed: 5000, // set the speed of the slideshow in MS
transition: "fade", // set the t r ansition between images
speed: 1000 // set the speed of the t r ansition in MS
});
Download ColorBox @ colorpowered.com/colorbox/
jsbin.com/ecayo3/18#slide41
![Page 43: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/43.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 43/48
Webmasters' Guild
Friday, June 4, 2010
tablesorter tablesorter
Head:
<link href="css/tablesorter.css" />
HTML:
<table id="ericsDreams"><! -- full table code --></table>
Foot:<script src="js/jquery.tablesorter.min.js"></script>
<script>
$(function(){
$("#ericsDreams").tablesorter ();
});
</script>
![Page 44: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/44.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 44/48
Webmasters' Guild
Friday, June 4, 2010
tablesorter Optionstablesorter Options
Set custom options for tablesorter like this:
$("#ericsDreams").tablesorter ({
widgets: ['zebra'] // Zebr a st r ipes alter nating r ows
});
Download tablesorter @ tablesorter.com/docs/
http://jsbin.com/ecayo3/18#slide43
![Page 45: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/45.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 45/48
Webmasters' Guild
Friday, June 4, 2010
ListNavListNav
Head:
<link href="css/listnav.css" />
HTML:
<div id="ericsDreams-nav"></div> <! --needed for nav list -->
<ul id="ericsDreams"><! -- lots of li's --></ul>Foot:
<script src="js/jquery.listnav.min.2.1.js"></script>
<script>
$(function(){
$("#ericsDreams").listnav();
});
</script>
![Page 46: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/46.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 46/48
Webmasters' Guild
Friday, June 4, 2010
ListNavListNav OptionsOptions
Set custom options for ListNav like this:
$("#ericsDreams").listnav({
showCounts: false, // Don¶t show counts above letter s
noMatchText: "Fail!", // Custom text for invalid selections
cookieName: "Dreams", // Selection saved in Cookie
includeOther : true // Include an Other option [~!@#]
});
// include cookie plugin for cookieName to function
Download ListNav @ ihwy.com/Labs/jquery-listnav-plugin.aspx
jsbin.com/ecayo3/18#slide45
![Page 47: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/47.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 47/48
Webmasters' Guild
Friday, June 4, 2010
Great ReferencesGreat References
John Resig's introduction slides
jQuery 1.4 Cheat Sheet
jQuery API
jQuery Forums
YAYquery Podcast (explicit)
DEMOS:
jsbin.com/ecayo3/18
![Page 48: Intro to jQuery Nysforum](https://reader031.vdocument.in/reader031/viewer/2022021214/577d2a6e1a28ab4e1ea928b1/html5/thumbnails/48.jpg)
8/6/2019 Intro to jQuery Nysforum
http://slidepdf.com/reader/full/intro-to-jquery-nysforum 48/48
Webmasters' Guild
Friday June 4 2010
I LikeI LikePlugins!Plugins!Show UsShow UsMore!More!