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

elements – $(‘#target’) - all elements with id “target” – $(‘div p’) - all

elements in a

– $(‘p.emph’) - all

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(“

New heading!

”);

• 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("

"+data+"

").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"+str+""); } $("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

Local data:

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 = ) { 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