Denne gangen tenkte jeg å kun vise et eksempel på bruk av jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery - ta det piano</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
displayKeys();
});
$(window).resize(function() {
displayKeys();
});
function displayKeys() {
$("body").html('');
// Piano layout coped from the following image: http://en.wikipedia.org/wiki/File:D274.jpg,
// through the follwing article: http://en.wikipedia.org/wiki/Musical_keyboard
// Set up the keyboard container, which should hold all the keys
$("body").append('<div id="pianocontainer"></div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
for(var i=1; i<=7;i++) {
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
$("#pianocontainer").append('<div> </div>');
}
$("#pianocontainer").append('<div> </div>');
// Style the container and the keys. This should be done through regular css in most of the cases,
// but we're using jquery, since this is what the tutorial is all about
// Doing static css assignments first, so these can be used in the calculations later
$("#pianocontainer").css('border', '1px solid gray');
$("div.pianokey").not("div.minorkey").css('float', 'left');
$("div.pianokey").not("div.minorkey").css('border', '1px solid lightgray');
$("div.minorkey").css('background-color', 'black');
$("div.minorkey").css('position', 'absolute');
$("#pianocontainer, div.pianokey").css('height', Math.min(200, $(document).height() * 2 / 3));
// Setting the width of each of the piano keys
$("div.pianokey").not("div.minorkey").css('width', ($("#pianocontainer").width() - 2) / $("div.pianokey").not("div.minorkey").length - 2 * $("div.pianokey").css('border').substring(0, $("div.pianokey").css('border').indexOf("px"))); // Requires the border to be specified in format of ("border: Xpx ..."), where X is the border width. Subtracting the left and right border in the width calculation
// Height and width of the minor keys
$("div.minorkey").css('height', $("#pianocontainer").height() * (2 / 3)); // 2/3 of regular height
$("div.minorkey").css('width', $("div.pianokey").not("div.minorkey").width() * (2 / 3)); // 2/3 of regular width
// Each minor key is absolutely positioned - need to set left attribute based on their siblings
$.each($("div.minorkey"), function(key, element) {
$(element).css('left', $(element).next().position().left - $(element).width() / 2);
});
}
</script>
</head>
<body></body>
</html>
Kopier koden over til et html-dokument, og vis det i nettleseren din. Du skal da få se et piano. Foreløpig gjør dette pianoet ikke spesielt mye, det skal vi prøve å få til etter hvert.