Set 6: Web Development Toolkits IT452 Advanced Web and Internet Systems
advertisement
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’)
$(‘#target’)
$(‘div p’)
$(‘p.emph’)
$(‘*’)
$(‘img[border=1]’)
…..
- all <p> elements
- all elements with id “target”
- all <p> elements in a <div>
- all <p> elements of class “emph”
- all elements in the DOM!
- 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’).eq(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(resp) { alert("received reply! " + resp); } );
• Full Options:
var ajaxSettings = {
type: “POST",
url: “query.pl",
data: "name=mcdowell&location=USNA",
success: function(resp) {
$('#target').append("<p>"+resp+"</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: “queryXML.pl",
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/2.1.3/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
