1 / 48

Eric.Steinborn@dcjs.state.ny.us

Eric.Steinborn@dcjs.state.ny.us. Poll. Just Thought you should know. Eric 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

linh
Download Presentation

Eric.Steinborn@dcjs.state.ny.us

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Eric.Steinborn@dcjs.state.ny.us

  2. Poll

  3. Just Thought you should know

  4. Eric 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!

  5. A Little Bit About jQuery What is jQuery? • jQuery is an Open-Source JavaScript framework that simplifies 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)

  6. A Little Bit About jQuery 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.. Why should you use it?

  7. I <3 The jQuery Community

  8. PWNS All Other Frameworks

  9. Who Uses jQuery? docs.jquery.com/Sites_Using_jQuery

  10. Who Uses jQuery In NY?

  11. What is the DOM? Document Object Model (DOM): noun Blah blah blah long definition that makes little sense….

  12. 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

  13. 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. Wrap all your jQuery code with the document ready function: • $(document).ready(function(){ • // insert sweet, sweet jQuery code here… • });

  14. And What If I Don't Wanna, Huh? 1 of 3 things will happen: • Code doesn't work, throws an error (90%) • Code works… this page load, next page load see #1. (~9%) • Code opens a worm hole that transports your page back to 1990 revolutionizing the Web as we know it. While seemingly great, it also creates a paradox and destroys the universe. * (<1%) • *(has yet to be fully verified)

  15. We get it Eric, you're a geek…Get to the jQuery already! Your about ta get a wedgie NERD!* *spelling intentional

  16. Loading 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

  17. Load Scripts At The Bottom Problem: When scripts are downloading they block everything else in almost all browsers! Solution: Best practice: Load your scripts at the bottom of your page so they don't interrupt page content downloads.

  18. And BOOM! Goes The Dynamite. jsbin.com/ecayo3/18#slide19 Html: <p>Hello World! I'm Eric</p> Script: $(function(){ $("p").addClass("isCool"); //keep telling yourself that.. }); Resulting html: <p class="isCool">Hello World! I'm Eric</p>

  19. $ ("p") .addClass("isCool"); Break It Down Now! Grabs a DOM element using a CSS selector. Built in method that adds a class to the jQuery Collection $(function(){// = $(document).ready(function(){ Initiates the jQuery function Selector is in quotes. Class is in quotes. Creates a jQuery “Collection” $ = jQuery ends with a semicolon. <p> });

  20. All Your Basic Selectors Are Belong To Us • Uses the same syntax you use to style elements in CSS! api.jquery.com/category/selectors/

  21. Get Classy <p> jsbin.com/ecayo3/18#slide22 • jQuery: $("p").addClass("sophisticated"); • Before: <p> • After: <p class="sophisticated">

  22. This <p> Has No Class At All! jsbin.com/ecayo3/18#slide22 • jQuery: $("p").removeClass("sophisticated"); • Before: <p class="sophisticated"> • After: <p class="">

  23. <div> Hide and Seek jsbin.com/ecayo3/18#slide24 • jQuery: $("div").show(); • Before: <div style="display:none;"> • After: <div style="display:block;">

  24. I’m Not Lame, Am I? jsbin.com/ecayo3/18#slide25 • jQuery: $("#eric").text("Is Cool"); • Before: <p id="eric">Is Lame</p> • After: <p id="eric">Is Cool</p>

  25. You Can Chain Most Methods Together jsbin.com/ecayo3/18#slide26 • $("p") • .addClass("sophisticated") • .text("Hello World!") • .show();

  26. Click Events Are Awesome! jsbin.com/ecayo3/18#slide27 • $("#eric").click(function(){ • $(this).text("Is Cool"); // this = #eric • alert("Take that High School!"); • }); • $("#eric").click(function(event){ • $(this).text("Is Cool"); // this = #eric • alert("Take that High School!"); • event.preventDefault(); //Prevents default action • });

  27. Some of Basic Methods api.jquery.com/

  28. Getters and Setters

  29. Dual Purpose Methods

  30. Use jQuery To Get <p>Eric</p>

  31. Use jQuery To Set <p>Eric</p>

  32. Questions?

  33. Plugins

  34. Viva Variety! • “If you want to create an animation, effect or UI component, chances are pretty good that someone has done your work for you already.” • -Eric Steinborn 2010 • plugins.jquery.com

  35. I Will Be Covering These Plugins

  36. That's Just Typical.. • Download the plugin from its site. • Depending on the plugin you can have 1 or more files to install. • Copy the plugin, and any of its dependencies to your server. • If needed call css <link href="plugincss.css" /> • Call jQuery <script src="jQuery.js"> • Call the plugin <script src"jQuery.pluginname.js"> • Initialize plugin $("#mypluginContainer").pluginInit();

  37. Go-Go-Get ColorBox! • Go to colorpowered.com/colorbox/ • This is what you'll get

  38. Go-Go-Install ColorBox! • Extract min.js to my "/js/plugins/" folder • I like example 2 so I'll extract • These to my /css/ folder

  39. Go-Go-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>

  40. Go-Go-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.

  41. Go-Go-Cut It Out Already! jsbin.com/ecayo3/18#slide41 • 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 transition between images • speed: 1000// set the speed of the transition in MS • }); • Download ColorBox @ colorpowered.com/colorbox/

  42. 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>

  43. tablesorter Options http://jsbin.com/ecayo3/18#slide43 • Set custom options for tablesorter like this: • $("#ericsDreams").tablesorter({ • widgets: ['zebra']// Zebra stripes alternating rows • }); • Download tablesorter @ tablesorter.com/docs/

  44. ListNav • 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>

  45. ListNav Options jsbin.com/ecayo3/18#slide45 • Set custom options for ListNav like this: • $("#ericsDreams").listnav({ • showCounts: false, // Don’t show counts above letters • 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

  46. Great References • John Resig's introduction slides • jQuery 1.4 Cheat Sheet • jQuery API • jQuery Forums • YAYquery Podcast (explicit) • DEMOS: • jsbin.com/ecayo3/18 • eric.steinborn@dcjs.state.ny.us

  47. I Like Plugins!Show Us More!

More Related