In this video we’ll learn pretty much everything about JQuery. We’ll cover how to load the JQuery and JQuery UI libraries. We’ll also cover selecting elements, styling elements, adding text, retrieving text, changing attributes, JQuery events, JQuery animations, JQuery UI, and Ajax.
I did my best to condense everything you’d learn in a standard 200 page book down into one video. All the code used is available below. I also have a link to everything in a compressed form here for download.
If you like videos like this, it helps me when you tell Google with a click here [googleplusone]
Code From the Video
jquerytut.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 |
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery Tutorial</title> <style type="text/css"> .highlight { background-color: yellow; } </style> <!-- Get the JQuery library Jquery 1 & 2 are the same except JQuery 2 doesn't support IE 6, 7, and 8 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> </head> <body> <div id="wrapper"> <h1>Random Stuff</h1> <p id="p_one"><img src="ntt-logo.png" id="logo2" alt="NTT Logo" height="180" width="180">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Aenean pretium</em>, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="#">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. <b>In pretium varius nisi</b>, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id gravida nunc consequat vel. <a href="#">Nullam nec condimentum magna</a>. Sed dignissim interdum risus ac mattis. In hac habitasse platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p> <p id="p_two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="mailto:derekbanas@verizon.net">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. In pretium varius nisi, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id <a href="http://google.com">gravida nunc consequat</a> vel. Nullam nec condimentum magna. Sed dignissim interdum risus ac mattis. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">In hac habitasse</a> platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p> <p id="p_three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Aenean pretium,</i> ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula.</p> <table id="tableData"> <caption>Baseball</caption> <thead> <tr> <td colspan="4">Best Baseball Players</td> </tr> </thead> <tfoot> <tr><td colspan="4">* Hall of Fame</td></tr> </tfoot> <tbody> <tr> <td></td> <td>Average</td> <td>RBIs</td> <td>Homeruns</td> </tr> <tr> <td><a href="#">Hank Aaron*</a></td> <td>.305</td> <td>2297</td> <td>755</td> </tr> <tr> <td><a href="#">Babe Ruth*</a></td> <td>.342</td> <td>2214</td> <td>714</td> </tr> <tr> <td><a href="#">Barry Bonds</a></td> <td>.298</td> <td>1996</td> <td>762</td> </tr> </tbody> </table> <h2 id="bestSelling">Best Selling Childrens Books</h2> <ol id="oListTypes"> <li>Harry Potter <ol id="oListIndent"> <li>and the Sorcerer's Stone</li> <li>and the Half-Blood Prince</li> <li>and the Chamber of Secrets</li> <li>Prisoner of Azkaban</li> <li name="best_book">and the Goblet of Fire</li> <li>and the Order of the Phoenix</li> <li>and the Deathly Hallows</li> </ol> </li> <li>The Very Hungry Caterpillar</li> </ol> <input type="text" id="yourName" size="50"> <input type="text" id="listStuff" size="50"><br /> <h2 id="trackEvents">Tracking Events</h2> Mouse Click : X : <input type="text" id="mClickXPos"> Y : <input type="text" id="mClickYPos"><br /> Mouse Move : X : <input type="text" id="mMoveXPos"> Y : <input type="text" id="mMoveYPos"><br /> Key Pressed : <input type="text" id="keyPressed"><br /> <span id="formEvent">Form Event</span> : <input type="text" id="inputFormEvent"><br /><br /> <img src="1.jpg" id="accident" alt="accident"> <div id="jsonData"></div> <button type="button" id="getData">Get Data</button> <script type="text/javascript"> // When the document is ready execute the JQuery $("document").ready(function() { // ADDING / REMOVING / CHANGING ELEMENTS // You can change CSS attributes like this // # targets ids and . targets classes $("#wrapper").css("width", 500); $("#wrapper").css("margin", "auto"); $("#logo2").css("float", "left"); $(".p_two").css("color", "purple"); // How to pass in multiple arguments $(".p_two").css({"background" : "url('repeatBkgrnd.png') repeat-y"}); // Target elements by tag $("a").css("color", "red"); // Target tags only in other tags, classes, or ids $("#tableData a").css("color", "green"); // Target every a element that comes after a em $("em + a").css("color", "orange"); // Target children elements in elements $("p > em").css("color", "gray"); // Target the 3rd li in a list $("#oListIndent li:nth-child(3)").css("color", "red"); // Change the text in an html element if the li has a // name attribute $("li[name]").html("'and the Goblet of Fire'"); // Change the value in a text input element $("input[type='text']#yourName").val("Derek"); // Target items that contain a value (*=) $("a[href*='google']").css("font-weight", "bolder"); // Target an image with an alt that starts with (^=) NTT // and change the border $("img[alt^='NTT']").css({"border-color": "black", "border-width":"1px", "border-style":"solid"}); $("a[href^='http://g']").css("color", "cyan"); $("a[href^='mailto:']").css("color", "yellow"); // Change an image height and width on one line $("img[alt^='NTT']").width(150) .height(150); // Target items that end with ($=) a value $("a[href$='pdf']").css("color", "red"); // Select the odd (1,3,5) and even (0,2,4) items $("#tableData tr:even").css("background-color", "#FFFDD0"); $("#tableData tr:odd").css("background-color", "#F0F8FF"); // Select the first matching element $("#tableData tr:first").css({"background-color" : "#001A57", "color" : "white"}); // Select the last matching element $("#tableData tr:last").css("background-color", "#FFC0DB"); // Select the elements that don't contain 'and' in them $("#oListTypes li:not(:contains(and))").css("color", "red"); // Select every a element that contains 'gravida' $("a:contains(gravida)").css("color", "blue"); // Select every p element that contains a i element // and hide it $("p:has(i)").hide(); // Display the text between the matching p element alert($("p:has(i)").html()); // Change the text in the matching p element and show it // .text() works the same but it doesn't recognize html // elements $("p:has(i)").html("<i>Some normal text</i>").show(); // Append adds text at the end of an element $("p:has(i)").append(" I go at the end"); // Prepend adds text at the beginning of an element $("p:has(i)").prepend("I go at the beginning "); // Add a new element before the targeted one $("p:has(i)").before("<p id='before_p'>A new paragraph before</p>"); // Add a new element after the targeted one $("p:has(i)").after("<p id='after_p'>A new paragraph after</p>"); // When the element with the id 'after_p' is clicked // remove it from the document $("#after_p").click(function() { $(this).remove(); }); // Replace an element with another on click $("#before_p").click(function() { $(this).replaceWith('<p>I\'m the new paragraph</p>'); }); // Perform a different action on each matching element $("#oListIndent li").each(function(index) { // Get the value in the input element var inputListStuff = $("#listStuff").val(); // Assign a new value to the input element // $(this).text() gets the value for each individual // li element $("#listStuff").val(inputListStuff + ", " + $(this).text()); }); // CHANGING ELEMENT ATTRIBUTES // Add a class to elements // .removeClass() will take the class away $("#oListIndent li").addClass("Harry_Potter"); $(".Harry_Potter").css("color", "#36454F"); // You can toggle classes on and off an element $("#oListIndent li").click(function() { $(this).toggleClass("highlight"); // Get the changing background color and display it // in the input element var bgColor = $(this).css("background-color"); $("input[type=text]#yourName").val(bgColor); }); $("#logo2").click(function() { // Get the value stored in an attribute var imgName = $(this).attr("src"); $("input[type=text]#yourName").val(imgName); // Change the value of an attribute $("#logo2").attr("src", "ntt-logo-horz.png"); }); // EVENTS IN JQUERY // Trigger events on mouseover $("#logo2").mouseover(function() { $("#logo2").attr("src", "ntt-logo-horz.png"); }); // Trigger events on mouseout $("#logo2").mouseout(function() { $("#logo2").attr("src", "ntt-logo.png"); }); // Handle mouseover and mouseout with hover $("h2").hover(function() { // mouseover $("h2").css("color", "green"); }, function() { // mouseout $("h2").css("color", "black"); }); // Perform an action on double click $("#logo2").dblclick(function() { $("#logo2").attr("src", "ntt-logo-plastic.png"); }); // Get the document x and y position on click $(document).click(function(e) { $("#mClickXPos").val(e.pageX); $("#mClickYPos").val(e.pageY); }); // Get the x and y as the mouse moves // Use screenX and screenY to get x and y for the screen $(document).mousemove(function(e) { $("#mMoveXPos").val(e.screenX); $("#mMoveYPos").val(e.screenY); }); // Show key pressed on the keyboard // You can also use keydown() and keyup() $(document).keypress(function(e){ // e.which returns the keycode which we convert into // the key with fromCharCode var keyPressed = String.fromCharCode(e.which) $("#keyPressed").val(keyPressed); }); // Execute when input loses focus $("#inputFormEvent").blur(function() { $("#formEvent").text("Left Input Element"); }); // Execute when input value changes (Conflicts with blur) $("#inputFormEvent").change(function() { $("#formEvent").text("Input Element Changed"); }); // Execute when input gains focus $("#inputFormEvent").focus(function() { $("#formEvent").text("Input Element Focused"); }); // Execute when input value is selected $("#inputFormEvent").select(function() { $("#formEvent").text("Input Element Selected"); }); // We can assign events with on and pass the event to // track, an argument to pass and the function to call // You can attach multiple events by seperating them with // a space ex. "mouseover keypress" function showWhatTouched(e){ alert(e.data.message); } var bsMsg = { message:"Best Selling Touched" }; var teMsg = { message:"Track Events Touched" }; $("#bestSelling").on("mouseover", bsMsg, showWhatTouched); $("#trackEvents").on("mouseover", teMsg, showWhatTouched); // Catch when the document loads with ready() // Catch if the browser resizes with resize() // Catch when an element is scrolled with scroll() // Create simple slide show var accidentImgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"]; var focusImg = 1; $("#accident").click(function() { var image = accidentImgs[focusImg]; focusImg++; if(focusImg > 3){ focusImg = 0; } $("#accident").attr("src", image); }); // JQUERY ANIMATIONS // hide an element on click $("#p_one").click(function() { $(this).hide(); }); // slowly fade out an element over 2000 ms // You can also use fast, normal, and slow $("#p_two").click(function() { $(this).fadeOut(2000); // Redisplay the hidden element // You can also use .toggle(), .show() and .fadeIn() $("#p_one").fadeToggle(2000); }); // Fade an image to a given opacity $("#logo2").click(function() { $(this).fadeTo('slow', .50); }); // Target td that contains 'Bonds' $("td:contains('Bonds')").click(function() { // Hide row that contains a td that contains 'Bonds' $("tr:has(td:contains('Bonds'))").slideUp(1000); }); // Make the Bonds row reappear // You can also use slideToggle() $("td:contains('Hall')").click(function() { $("tr:has(td:contains('Bonds'))").slideDown(1000); }); // You can create custom animations with animate $("#p_one").click(function() { // To define left, right, top or bottom the element must // have a position property of relative or absolute $(this).css("position", "relative"); // Pass an object that contains the properties to change, // duration in milliseconds, easing function to use for // the transition and the function to call after the // animation completes // The easing method functions are "swing or "linear" // You also have the JQuery UI animations : easeInQuad, // easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, // easeInOutCubic, easeInQuart, easeOutQuart, // easeInOutQuart, easeInQuint, easeOutQuint, // easeInOutQuint, easeInExpo, easeOutExpo, // easeInOutExpo, easeInSine, easeOutSine, easeInOutSine, // easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, // easeOutElastic, easeInOutElastic, easeInBack, // easeOutBack, easeInOutBack, easeInBounce, // easeOutBounce, easeInOutBounce $("#p_one").animate( { left: 300, opacity: .5, 'font-size': "22px", width: 300 }, 2000, "easeInQuad", function(){alert("All Done");}); }); // It is common to use stop to prevent multiple // animations on the same object like this // $("#p_one").stop().animate( ... // JQUERY UI // A plug-in that has effects and user interface tools // http://jqueryui.com/download/ allows you to // customize the widgets you need // http://jqueryui.com/themeroller/ allows you to // pick the colors, fonts, etc. for the theme used // JQUERY AND AJAX // Ajax allows a page to update with information from // the server without a page reload }); <!-- End of JQuery Code --> </script> </div> <!-- End of wrapper --> <!-- Most common CSS attributes https://developer.mozilla.org/en-US/docs/Web/CSS/Reference background, background-attachment, background-color, background-image, background-repeat, border, border-bottom, border-color, border-style, border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width, box-shadow, color, columns, direction, float, font-family, font-size, font-style, font-weight, height, letter-spacing, line-height, list-style-type, list-style-image, list-style-position, margin, margin-bottom, margin-top, margin-right,margin-left, opacity, padding-bottom, padding-top, padding-right, padding-left, text-align, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-indent, text-orientation, text-shadow, text-transform, vertical-align, visibility, width, word-spacing, z-index --> </body> </html> |
jqueryuitut.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 |
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery Tutorial</title> <style type="text/css"> .highlight { background-color: yellow; } #wrapper { width: 500px; margin: auto; } .ui-menu{ width: 15em; } #cartDiv{ border-style: solid; border-width: 5px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- Add the JQuery UI CSS --> <link href="css/jquery-ui.min.css" rel="stylesheet"> <!-- Add the JQuery UI JS file --> <script src ="js/jquery-ui.min.js" > </script> <body> <div id="wrapper"> <ul id="shMenu"> <li><a href="JavaScript:void(0)">X Men</a> <ul> <li><a href="JavaScript:void(0)">Angel</a></li> <li><a href="JavaScript:void(0)">Cyclops</a></li> <li><a href="JavaScript:void(0)">Beast</a></li> <li><a href="JavaScript:void(0)">Marvel Girl</a></li> <li><a href="JavaScript:void(0)">Iceman</a></li> </ul> </li> <li><a href="JavaScript:void(0)">Defenders</a> <ul> <li><a href="JavaScript:void(0)">Hulk</a></li> <li><a href="JavaScript:void(0)">Doctor Strange</a></li> <li><a href="JavaScript:void(0)">Namor</a></li> <li><a href="JavaScript:void(0)">Silver Surfer</a></li> </ul> </li> </ul><br /> <div id="accordion"> <h4>Batman</h4> <div> Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named "the Bat-Man", the character is also referred to by such epithets as the "Caped Crusader",the "Dark Knight", and the "World's Greatest Detective". </div> <h4>Flash</h4> <div> The Flash is a fictional superhero appearing in American comic books published by DC Comics. Created by writer Gardner Fox and artist Harry Lampert, the original Flash first appeared in Flash Comics #1 (January 1940). </div> <h4>Superman</h4> <div> Superman is a fictional superhero appearing in American comic books published by DC Comics. The character is considered an American cultural icon. The Superman character was created by writer Jerry Siegel and artist Joe Shuster in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938. Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With the character's success, Superman helped to create the superhero genre and establish its primacy within the American comic book. </div> </div><br /> <div id="shTabs"> <ul> <li><a href="#ironman">Iron Man</a></li> <li><a href="#hulk">Hulk</a></li> <li><a href="#thor">Thor</a></li> <li><a href="#spiderman">Spiderman</a></li> </ul> <div id="ironman"> Iron Man (Tony Stark) is a fictional superhero appearing in American comic books published by Marvel Comics, as well as its associated media. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. He made his first appearance in Tales of Suspense #39 (cover dated March 1963). </div> <div id="hulk"> The Hulk is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by Stan Lee and Jack Kirby, and first appeared in The Incredible Hulk #1 (May 1962). Throughout his comic book appearances, the Hulk is portrayed as a large green humanoid that possesses immense superhuman strength and great invulnerability, attributes that grow more potent the angrier he becomes. Hulk is the alter ego of Bruce Banner, a socially withdrawn and emotionally reserved physicist who physically transforms into the Hulk under emotional stress and other specific circumstances at will or against it; these involuntary transformations lead to many complications in Banner's life. </div> <div id="thor"> Thor is a fictional superhero that appears in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes. </div> <div id="spiderman"> Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics existing in its shared universe. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (Aug. 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter. </div> </div><br /> <div id ="customDialog" title ="Custom Dialog"> <p>A random dialog box that contains important information</p> </div> <a href="JavaScript:void(0)" id="openDialog" title="Open Dialog Box">Open Dialog</a><br /><br /> <form action="#" id="sampForm"> Present:<br /> <select name="present" id="present"> <option>Toy</option> <option>Video Game</option> <option>Book</option> <option>Money</option> </select><br /> Birthday:<br /> <input type="text" name="birthday" id="birthday"><br /><br /> <p class="numOfPresents">Number of Presents</p> <fieldset> <legend>Number of Presents</legend> <div id="radioPresents"> <input type="radio" id="onePresent" name="presents" checked="checked"> <label for="onePresent">1</label> <input type="radio" id="twoPresent" name="presents"> <label for="twoPresent">2</label> <input type="radio" id="threePresent" name="presents"> <label for="threePresent">3</label> </div> </fieldset> <br /> <input type="button" id="randButton" value="Click Me"><br /><br /> <div id="cartDiv"> <img src="cart.png" alt="Shopping Cart" id="cart"> </div> <img src="toy1.png" alt="Bear" id="toy1" class="toy"> <img src="toy2.png" alt="Duck" id="toy2" class="toy"> <img src="toy3.png" alt="Batman" id="toy3" class="toy"> </form> <script type="text/javascript"> $(document).ready(function() { $("#shMenu").menu({ position: { // Popup menu comes on the right by default my: "center top", at: "center bottom" }, }); $("#accordion").accordion({ // Slide animation or not or length animate: 1500, // Starting tab active: 1, // Collapsible if same tab is clicked collapsible: true, // Event that triggers event: "click", // Height based on content (content) or largest (auto) heightStyle: "content" }); $("#shTabs").tabs({ // The event that switches the panel event: "click", // Effects: fadeIn, fadeOut, slideDown, slideUp, animate show: "fadeIn", hide: "fadeOut", // Starting panel active: 3, // Collapse by clicking the current tab collapsible: true, // Height based on content (content) or largest (auto) heightStyle: "auto" }); // Create a draggable / resizable dialog box $('#customDialog').dialog({ draggable: true, // Set true by default resizable: false, // Set true by default // You can use minWidth, minHeight, maxWidth, maxHeight height: 300, // Defined in pixels width: 300, // If set true the user can't do anything until the // dialog is closed modal: true, // Position the dialog with my and define the browser // position with at // 1st: left, right, center // 2nd: top, center, bottom position: { my: 'center top', at: 'center bottom', // You can also target to place based on an element // on the screen (center under the link) of: "#openDialog" }, // Define a delay for showing or hiding it show: 1000, hide: '1000', autoOpen: false, // Open true by default // create buttons for the dialog buttons : { "OK" : function(){ $("#openDialog").html("You clicked ok"); $(this).dialog("close"); }, "CANCEL": function(){ $("#openDialog").html("You clicked cancel"); $(this).dialog("close"); } } }); // Displays the dialog box on click $("#openDialog").click(function() { $('#customDialog').dialog("open"); }); // Use custom tooltip if the element has a title $("[title]").tooltip(); // JQUERY UI FORMS $("#present").selectmenu({ width: 200 }); $("#birthday").datepicker({ // Show month dropdown changeMonth: true, // Show year dropdown changeYear: true, dateFormat: "MM dd, yy", // Number of months to display numberOfMonths: 1, // Define maxDate maxDate: 365, // Define minDate minDate: -3650 }); // Style radio buttons $("#radioPresents").buttonset(); // Style buttons $("#randButton").button(); // You can make any element draggable $("#sampForm").draggable(); // Dragging and dropping elements $("#toy1").draggable(); $("#toy2").draggable(); $("#toy3").draggable(); $("#cartDiv").droppable({ // Adds the class highlight to the droppable activeClass: "highlight", // Adds class for when element is hovered hoverClass: "hoverDroppable", // Function to call when element is dropped drop: function(event, ui){ // Apply an effect when an element is dropped // clip, explode, fade, puff, // pulsate, scale, shake, slide, ui.helper.hide("fade"); // Get the alt for the itm dropped var itemAlt = $(ui.draggable).attr("alt"); // Display the item dropped alert("Item added : " + itemAlt); }, // Define class of elements that can be dropped accept: ".toy", // Can elements currently be dropped on it disabled: false, // Add an element when droppable items starts to drag activate: function(event, ui){ $("#cartMsg").remove(); $(this).append("<span id='cartMsg'>Drop Toy Here</span>"); }, // Called when an item isn't dropped in the dropzone deactivate: function(event, ui){ $("#cartMsg").remove(); $(this).append("<span id='cartMsg'>You know you want it</span>"); }, // Called when draggable is over droppable over: function(event, ui){ $("#cartMsg").remove(); $(this).append("<span id='cartMsg'>Drop It!!!</span>"); }, // Called when item leaves dropzone out: function(event, ui){ $("#cartMsg").remove(); $(this).append("<span id='cartMsg'>NOOOOOO!!!</span>"); } }); }); // End of JQuery </script> </div> <!-- End of Wrapper --> </body> </html> |
jqueryajaxtut.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery Tutorial</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <h3>Playing with Server Data</h3> <div> <h3>Message from the Server:</h3> <p id="first">Waiting for Message</p> </div> <form id="theForm"> <button type="button" id="oneButton">Get Text</button><br /> <div> <h3>Double Number on the Server:</h3> <span></span><br /> </div> <input type="text" name="data" id="data"></input> <button type="button" id="twoButton">Double Number</button><br /><br /> <button type="button" id="threeButton">Get XML Data</button> </form> <div> <h3>XML Data from the Server:</h3> </div> <div id="customers">Customer Information</div> <script type="text/javascript"> $("document").ready(function() { $("#oneButton").on("click",getInfoFromServer); $("#twoButton").on("click",getDblFromServer); $("#threeButton").on("click",getXmlFromServer); }); // Pull text from a text file on the server // Type defines the type of request to make being GET or POST // Success defines the function to call if the request // succeeds // Error could be defined to specify the function to call if // an error happens function getInfoFromServer() { $.ajax({ type: "GET", url: "textFromServer.txt", success: postToPage}); } // Function called to display the message from the server // Receives the text and the server status function postToPage(data, status) { $('#first').text(data); } // Load a value into a span // I define that the program getDouble.php should be executed // getDouble is sent the information in the form and then it // stores the returned info in the span function getDblFromServer() { $("span").load("getDouble.php", $("#theForm").serializeArray()); } // Here I define that I'm receiving xml data from the server function getXmlFromServer() { $.ajax({ type: "GET", url: "customers.xml", datatype: "xml", success: postToPageTwo}); } // I use the find method to search through the xml data // When I match for any of these attributes I append them to // the div named customers function postToPageTwo(data) { $(data).find('customer').each(function(){ var id = $(this).attr('id'); var firstName = $(this).find('firstName').text(); var lastName = $(this).find('lastName').text(); var street = $(this).find('street').text(); var city = $(this).find('city').text(); var zip = $(this).find('zip').text(); $('<div class="firstname"></div>').html(firstName).appendTo('#customers'); $('<div class="lastname"></div>').html(lastName).appendTo('#customers'); $('<div class="street"></div>').html(street).appendTo('#customers'); $('<div class="city"></div>').html(city).appendTo('#customers'); $('<div class="zip"></div><br />').html(zip).appendTo('#customers'); }); } </script> </body> </html> |
textFromServer.txt
1 |
Bunch of random text |
GetDouble.php
1 2 3 4 5 6 7 8 9 |
<?php // Get the value passed $numberToDbl = $_POST["data"]; // Create the response echo $_POST["data"] . " Times 2 Equals "; $doubleUp = $numberToDbl * 2; echo $doubleUp; ?> |
customers.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="iso-8859-1"?> <customers> <customer id="0"> <firstName>Paul</firstName> <lastName>Jones</lastName> <street>123 Main St</street> <city>Anywhere</city> <zip>15235</zip> </customer> <customer id="1"> <firstName>Sally</firstName> <lastName>Jones</lastName> <street>123 Main St</street> <city>Anywhere</city> <zip>15235</zip> </customer> </customers> |
Leave a Reply