IT452 Advanced Web and Internet Systems Set 6: Web Development Toolkits Why Use a Toolkit? • Choices – jQuery www.jQuery.com – Yahoo! UI Library (YUI) developer.yahoo.com/yui – Google Web Toolkit – Dojo – Prototype – … more 1
jQuery Selectors “Get all paragraphs that are children of ID ‘target’” • Vanilla Javascript: • jQuery Selector: jQuery Selector Patterns • Selector Patterns – $(‘p’) - all <p> elements – $(‘#target’) - all elements with id “target” – $(‘div p’) - all <p> elements in a <div> – $(‘ p.emph ’) - all <p> elements of class “ emph ” – $(‘*’) - all elements in the DOM! – $(‘ img [border=1]’) - all images with borders of 1 – ….. 2
The jQuery Object • Selectors return jQuery Objects • They can act like arrays – $(‘div’)[1] – $(‘div’).get(1) – $(‘div’).length – var arr = $(‘div’).get() The jQuery Object • Selectors return jQuery Objects • They can perform CSS and animation tricks – $(“a”). css("color", "red"); – $(“a”). css("border", "1px solid blue"); – $(“p”).text(“new text”); – $(‘#target’).hide() – $(“p”).animate( { opacity:0.2, marginLeft:”40px” }, 5000 ); \\ 5 seconds http://api.jQuery.com/category/css/ http://api.jQuery.com/category/effects/ 3
The jQuery Object • Selectors return jQuery Objects • They can change the DOM: – $(“body”).append(“<h1>New heading!</h1>”); • You can make jQuery objs from HTML elements x = document.getElementById (“mydiv1”); Which now works? 1. x.css(“color”, “red”); 2. $(x).css (“color”, “red”); 3. $(“x”). css (“color”, “red”); • Is this normally a good idea? The jQuery Object • Selectors return jQuery Objects • They have many convenience functions – $(‘#target’).parent() – .first() – .last() – .is(function) – .add(Object/selector) – .next(Selector) – .filter(Selector) http://api.jQuery.com/category/traversing/ 4
Event Handling $('#target').click(function() { alert('Handler for .click() called.'); }); Exercise – one-liners with jQuery only! Add a paragraph that says “Hello” to the div with id of “div7” Change the color of all “td” cells to blue Add a div that says “I’m a div” to the body of the document Change the words of every paragraph to say “New words” 5
Ajax with jQuery • The most basic call: $.get("data.txt", function(data) { alert("received reply! " + data); } ); • Full Options: var ajaxSettings = { type: “POST", url: "data.txt", data: "name=mcdowell&location=USNA", success: function(data) { $('#target').append("<p>"+data+"</p>").css("color","blue"); }, error: function(xhr, status, error) { alert("error: " + error); } }; $.ajax(ajaxSettings); Ajax with jQuery function handleResponse(resp) { // Get all all the apples from XML var list=resp.getElementsByTagName("apple"); for (var ii=0; ii<list.length; ii++) { var str = list[ii].firstChild.nodeValue; $("div").append("<li>"+str+"</li>"); } $("li").css("color","red"); } function sendRequest() { // Setup your Ajax settings. var ajaxSettings = { type: "POST", url: "data.xml", data: "name=mcdowell&location=USNA", success: handleResponse, error: function(xhr, status, error) { alert("error: " + error ); } }; // Make the call. $.ajax(ajaxSettings); } 6
Autocomplete with jQuery • Use a plugin for jQuery <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript"> function myonload() { $("#query").autocomplete({ url: 'search.pl', minChars: 1, useCache: false, filterResults: false, }); } </script> </head> <body onload=“myonload()"> <form> <p>Local data: <input type="text" id="query" /> </form></body> jQuery Autocomplete (Fake Perl) #!/usr/bin/perl use strict; use CGI qw( :standard ); use CGI::Carp qw(warningsToBrowser fatalsToBrowser); print "Content-Type: text/plain; charset=UTF-8\n\n"; open(IN,"search.txt") || die "Cannot open search.txt ($!)\n"; while( my $line = <IN> ) { print "$line"; } close IN; What do you need to change? 7
What else can we do? • Photo Slideshows • Tab Views • Calendars, Date Pickers • Buttons galore • File Uploading • Drag and Drop • … many more How do I start? 8
Some Sites with jQuery Plugins • http://jquerylist.com/ • http://jquerystyle.com/ • http://jquery.malsup.com/ • http://bassistance.de/jquery-plugins/ • (cool photo slider) http://slidesjs.com/ 9
Recommend
More recommend
