stefan-jonker/jQuery introductie

## jQuery introductie
<!doctype html>
<html>
<head>
	<metacharset="utf-8">
	<title>Demo</title>

	<style>
	th.headerSortUp {
	    background-color: #3399FF;
	}
	</style>

</head>

<body>

<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.tablesorter.js"></script>

<ul id="orderedlist">
	<li>test</li>
	<li>test</li>
	<li><a href="http://www.stefanjonker.nl"/>test</a></li>
	<li>
	test
	<ul>
		<li>test</li>
	</ul>
	</li>
</ul>


<dl id="faq">
	<dt>test</dt>
	<dd>testje</dd>
	<dt>test</dt>
	<dd>testje</dd>
	<dt>test</dt>
	<dd>testje</dd>
</dl>

<form>
	<input type="text" value="test"/>
	<input type="submit"/>
</form>

<form>
	<input type="text" value="test"/>
	<input type="reset"/>
</form>

<a href="#" name="test">test</a>

<div id="rating">

</div>

<table id="myTable" class="tablesorter">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

<script>

$(document).ready(function() {
   $("a[name]").css("background", "#eee" );
   $("a[href*='stefanjonker']").css("color", "#FF0000");

   $('#faq').find('dd').hide().end().find('dt').click(function() {
     $(this).next().slideToggle();
   });
 });

 $(document).ready(function() {
   // generate markup
   $("#rating").append("Please rate: ");

   for ( var i = 1; i <= 5; i++ ) {
     $("#rating").append("<a href='#'>" + i + "</a> ");
   }

   // add markup to container and apply click handlers to anchors
   $("#rating a").click(function(e) {
     // stop normal link click
     e.preventDefault();

     // send request
     $.post("rate.php", {rating: $(this).html()}, function(xml) {
       // format and output result
       $("#rating").html(
         "Thanks for rating, current average: " +
         $("average", xml).text() +
         ", number of votes: " +
         $("count", xml).text()
       );
     });
   });
 });


$(document).ready(function() {
   $("#myTable").tablesorter({
     // striping looking
     widgets: ['zebra']
   });
 });

</script>


</body>
</html>
	<!doctype html>
	<html>
	<head>
	<metacharset="utf-8">
	<title>Demo</title>

	<style>
	th.headerSortUp {
	background-color: #3399FF;
	}
	</style>

	</head>

	<body>

	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.tablesorter.js"></script>

	<ul id="orderedlist">
	<li>test</li>
	<li>test</li>
	<li><a href="http://www.stefanjonker.nl"/>test</a></li>
	<li>
	test
	<ul>
	<li>test</li>
	</ul>
	</li>
	</ul>


	<dl id="faq">
	<dt>test</dt>
	<dd>testje</dd>
	<dt>test</dt>
	<dd>testje</dd>
	<dt>test</dt>
	<dd>testje</dd>
	</dl>

	<form>
	<input type="text" value="test"/>
	<input type="submit"/>
	</form>

	<form>
	<input type="text" value="test"/>
	<input type="reset"/>
	</form>

	<a href="#" name="test">test</a>

	<div id="rating">

	</div>

	<table id="myTable" class="tablesorter">
	<thead>
	<tr>
	<th>Last Name</th>
	<th>First Name</th>
	<th>Email</th>
	<th>Due</th>
	<th>Web Site</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Smith</td>
	<td>John</td>
	<td>jsmith@gmail.com</td>
	<td>$50.00</td>
	<td>http://www.jsmith.com</td>
	</tr>
	<tr>
	<td>Bach</td>
	<td>Frank</td>
	<td>fbach@yahoo.com</td>
	<td>$50.00</td>
	<td>http://www.frank.com</td>
	</tr>
	<tr>
	<td>Doe</td>
	<td>Jason</td>
	<td>jdoe@hotmail.com</td>
	<td>$100.00</td>
	<td>http://www.jdoe.com</td>
	</tr>
	<tr>
	<td>Conway</td>
	<td>Tim</td>
	<td>tconway@earthlink.net</td>
	<td>$50.00</td>
	<td>http://www.timconway.com</td>
	</tr>
	</tbody>
	</table>

	<script>

	$(document).ready(function() {
	$("a[name]").css("background", "#eee" );
	$("a[href*='stefanjonker']").css("color", "#FF0000");

	$('#faq').find('dd').hide().end().find('dt').click(function() {
	$(this).next().slideToggle();
	});
	});

	$(document).ready(function() {
	// generate markup
	$("#rating").append("Please rate: ");

	for ( var i = 1; i <= 5; i++ ) {
	$("#rating").append("<a href='#'>" + i + "</a> ");
	}

	// add markup to container and apply click handlers to anchors
	$("#rating a").click(function(e) {
	// stop normal link click
	e.preventDefault();

	// send request
	$.post("rate.php", {rating: $(this).html()}, function(xml) {
	// format and output result
	$("#rating").html(
	"Thanks for rating, current average: " +
	$("average", xml).text() +
	", number of votes: " +
	$("count", xml).text()
	);
	});
	});
	});


	$(document).ready(function() {
	$("#myTable").tablesorter({
	// striping looking
	widgets: ['zebra']
	});
	});

	</script>


	</body>
	</html>