Entwicklung multimedialer Anwendungen
Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm
Hochschule Harz
FB Automatisierung und Informatik
mwilhelm@hs-harz.de
http://www.miwilhelm.de
Raum 2.202
Tel. 03943 / 659 338
Inhalt
1. Einleitung
2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)
4. CSS3 (Design) 5. SVG / Canvas 6. jQuery
Javascript-Frameworks
Script.aculo.us• http://script.aculo.us
GWT• http://code.google.com/webtoolkit
YUI• http://developer.yahoo.com/yui
Dojo
• http://www.dojotoolkit.org
jQuery
• http://jquery.com
Ext JS
• http://www.extjs.com
MooTools
• http://mootools.net
jQuery
Entwickler• John Resig
Hauptbasis• CSS-Selektoren
Ist ein Framework• dynamische Änderung eines oder mehrerer Elemente
• Vereinfachung der Befehle
• Keine Unterscheidung zwischen IE und „the rest“
• Verschachtelung von Befehlen (à la Pipe)
• Interne Schleifen
jQuery
Ist ein UI-Framework• Erlaubt neue UI-Elemente
• Kalender
Vereinfachte Web_Programmierung mobile/desktop jQuery-Plugin• viele Plugin erleichtern die Entwicklung
Grid-Layout mit jQuery-Grid-Plugin Mauerhandwerk mit jQuery• Plugin „Masonry“
• Layout à la GridBagLayout
jQuery-Quellen: Aktuelle Version: 2.1.4
Download• https://jsquery.com
• https://jsquery.com/download
Version 1• Unterstützt IE 6,7,8
Version 2• Keine Unterstützung von IE 6,7,8
Compress-Version• http://code.jquery.com/jquery-2.1.4.min.js
Uncompressed-Version• http://code.jquery.com/jquery-2.1.4.js
jQuery-Quellen einbinden
lokal• <script type="text/javascript" src="js/jquery-2.1.4.min.js" />
lokal• <script type="text/javascript" src="js/jquery.min.js" />
dynamisch• <script type="text/javascript" >
• google.load("jquery“,"2.1.4");
• </script>
dynamisch• <script type="text/javascript" >
• google.load("jquery“,"2.1.4", {umcompressed:true});
• </script>
jQuery-Quellen einbinden
lokal und dynamisch• <script type="text/javascript"
• google.load("jquery“,"2.1.4");
• </script>
• <script >
• window.jquery ||
• document.write('<script src="js/jquery.min.js" />');
• </script>
Document-Object-Modell (Dom-Baum)
window.onload = function() {
"use strict;"
root = document.documentElement;
var stufe=1;
output='';
search(stufe, root);
editorId = document.getElementById('editorId');
editorId.value=output;
} // onload
function log(item) { console.log(item);
output+=item+'\n';
}
Document-Object-Modell (Dom-Baum)
function search(stufe, element) {
"use strict;"
var rand='';
for (var i=0; i<stufe; i++) rand=rand+' ';
log(rand+'element: '+element.nodeName);
log(rand+' Anzahl childNodes.length: '+element.childNodes.length);
log(rand+' Anzahl children.length: '+element.children.length);
log(rand+' #childNodes: '+element.childElementCount);
for (var i=0; i<element.children.length;i++) { search(stufe+1, element.children[i]);
}
if (element.children.length==0 && element.nodeName!='script') { log(rand+' InnerHTML: '+element.innerHTML);
Document-Object-Modell (Dom-Baum)
•html
•head
•title / meta
•script
•body
•h1
•arcticle
•section
•section
•arcticle
•article
•br
• element: html
• element: head
• element: title
• element: meta
• element: meta
• element: link
• element: script
• element: body
• element: h1
• element: article
• element: section
•InnerHTML:
Dom-Baum
Einstiegsbeispiele
Alle Befehle werden mit dem $() eingegeben Beispiele:• $('p') alle p-Elemente der Seite
• $('div') alle div-Elemente der Seite
• $('h3') alle h3-Elemente der Seite
Zusammengesetzte Beispiele:• $('#box p') alle p-Elemente in dem #box-Abschnitt
• $('.box p') alle p-Elemente in einer box-class
Beispiele mit Aktionen:• $('p').addClass("green") alle p-Elemente erh. den Selektor green
• $('p').removeClass("green")
• $('#box p').removeClass("green")
Befehle: http://www.w3schools.com/jquery/
Selektor:• $('p')
• $('#box p') alle p-Elemente in dem #box-Abschnitt
• $('.box p') alle p-Elemente in einer box-class
HTML:• Get: text(), html(), val(): $("#test").text()
• Set text(), html(), val(): $("#test").text("a");
• Add: append, prepend, after, before
$("p").append("Some appended text.");
• Remove: remove / empty
$("html").removeClass("no-js");
$("#id1").remove();
Befehle
Events• click
• dblclick
• mousenter
• mouseleave
• $("#hide").click(function(){
$("p").hide();
});
• $("p").click(function(){
// action goes here!!
});
• $("#p1").mouseenter(function(){
alert("You entered p1!");
});
• $("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
Befehle
Traversierung• Ancestors Vorfahr
• parent
• parent, parents, parentUntil
• $("span").parents();
• $("span").parents("ul");
• $("span").parentsUntil("div");
• Descendants
• children
• $("div").children();
• $("div").children("p.1");
• find
• $("div").find("span");
Befehle
Traversierung• Siblings Geschwister
• siblings, next, nextAll, nextUntil, prev, prevAll, prevUntil
• $("h2").siblings(); $("h2").next();
• $("h2").nextAll(); $("h2").nextUntil("h6");
• Filtering
• first, last, eq, filter
• $("div p").first();
• $("div p").last();
• $("p").eq(1);
• $("p").filter(".intro"); alle p mit class intro
• $("p").not(".intro");
• hide / show Sichtbarkeit von Elementen
• fadeIn, fadeOut, fadeToggle, fadeTo: Sichtbarkeit slow, 3000 ms
• slideDown, slideUp, slideToggle: HTML5: Expanded
• animate: HTML5: transition
• stop: anhalten, löschen der aktuellen Queue
Befehle
Einstiegsbeispiele der Methoden
$(document).ready(function(){$("p").click(function(){
$(this).hide();
});
});
Die „ready“-Funktion ist VOR der window.onload• ready: alle Elemente außer den Bildern sind geladen
• onload: alle Elemente sind geladen
1. Beispiel: jq_bsp1_java.xhtml
HTML• <div >
• <h3>hier ist ein h3-Abschnitt</h3>
• <p>Erster Absatz</p>
• <p id="secondParagraph" >Zweiter Absatz</p>
• <p>Dritter Absatz</p>
• </div>
Javascript• function changeColor() {
• var pItem = document.getElementById("secondParagraph");
• pItem.className = "green";
• } // changeColor
2. Beispiel: jq_bsp2_java.xhtml
HTML• <div id="box">
• <h3>hier ist ein h3-Abschnitt</h3>
• <p>Erster Absatz</p>
• <p>Zweiter Absatz</p>
• <p>Dritter Absatz</p>
• </div>
Javascript• window.onload = function() {
• var boxItems = document.getElementById("box");
• var pItems = boxItems.getElementsByTagName("p");
• for (var i = 0; i < pItems.length; i++) {
• if (pItems[i].firstChild.data == "Zweiter Absatz") {
• pItems[i].className = "green";
• } // if
• } // for
• } // onload
3. Bis 5. Beispiel: mit jQuery: jq_bsp3.xhtml
$(document).ready(
function() {
$("p").addClass("green");
$("#box").addClass("green");
$("#box p").addClass("green");
$("#box p:contains('Zweiter Absatz')").addClass("green");
}
3-5. Beispiel: Erläuterungen
$(document).ready(• Besser als onload, VOR den Bildern
Anonyme Funktion• $("p");
• // suche alle p-Abschnitte, return liste
• $("#box");
• // 3. Bsp: suche alle Abschnitt mit id=box, return liste
• $("#box p")
• // 4. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt
• $("#box p:contains('Zweiter Absatz')")
• // 5. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt, die
• Einen Text enthalten
• addClass("green");
• Füge class hinzu
Maus-Beispiel mit java-Script: jq_maus1_java
Drei p-Abschnitte Beim Button-Mausklick soll ein Abschnitt den grünen Selektor erhaltenfunction changeColor() {
var pItem = document.getElementById("Paragraph2");
pItem.className = "green";
} // changeColor
<div >
<h3>hier ist ein h3-Abschnitt</h3>
<p>Erster Absatz</p>
<p id="Paragraph2" >Zweiter Absatz</p>
<p>Dritter Absatz</p>
Maus-Beispiel mit java-Script: jq_maus2_java
function changeColor1(pItem) { pItem.className = "green";
} // changeColor
function changeColor2(pItem) { pItem.className = "";
} // changeColor
<div >
<h3>hier ist ein h3-Abschnitt</h3>
<p onmouseover="changeColor1(this);" onmouseout="changeColor2(this);" >1</p>
<p onmouseover="changeColor1(this);" onmouseout="changeColor2(this);" >2</p>
<p onmouseover="changeColor1(this);" onmouseout="changeColor2(this);" >3</p>
</div>
Maus-Beispiel mit java-Script: jq_maus3_java
function changecolor(aP) { aP.className = "green";
} // changecolor
<div>
<h3>hier ist ein h3-Abschnitt</h3>
<p onclick="changecolor(this)" > Erster Absatz</p>
<p onclick="changecolor(this)" >Zweiter Absatz</p>
<p onclick="changecolor(this)" >Dritter Absatz</p>
</div>
Maus-Beispiel mit java-Script: jq_maus4_java
function changecolor(aP) {
for (var i=0; i<aP.parentNode.children.length;i++) { aP.parentNode.children[i].classList.remove('green');
}
aP.className='green';
}
<div>
<h3>hier ist ein h3-Abschnitt</h3>
<p onclick="changecolor(this)" > Erster Absatz</p>
<p onclick="changecolor(this)" >Zweiter Absatz</p>
<p onclick="changecolor(this)" >Dritter Absatz</p>
</div>
Maus-Beispiel: jq_maus5
Drei p-Abschnitte Beim Mausklick soll der Abschnitt den grünen Selektor erhalten (kein Löschen)$(document).ready(
function() {
$("#box p").click( // suche p-Abschnitt in box function() {
$(this).addClass("green");
} // 2. function );
function changecolor(aP) {
for (var i=0; i<aP.parentNode.children.length;i++) {
aP.parentNode.children[i].classList.remove('green');
}
aP.className='green';
}
$("#box p").click(function() {
$(this).parent().children().removeClass();
$(this).addClass("green");
});
Maus-Beispiel: jq_maus6
$(document).ready(function() { var aP = $("#box p");
aP.click(
function() {
var pos=aP.index(this);
aP.parent().children().removeClass();
$(this).addClass("green"); // $(this) ist angeklickte p aP.parent().removeClass();
aP.parent().addClass("boxColor-"+pos);
} );
Maus-Beispiel: jq_maus7
<ul>
<li>Milk</li>
<li>Bread</li>
<li class="fade">Chips</li>
<li class="fade">Socks</li>
</ul>
Maus-Beispiel: jq_maus8
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
} );
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
hover: 1/2:sofort 3/4:dynamisch
Menüs mit CSS: jq_menues_java1.xhtml
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Zweiter Level 1</a></li>
<li><a href="#">Zweiter Level 3</a> // kein </li>
<ul>
<li><a href="#">Dritter Level 1</a></li>
<li><a href="#">Dritter Level 3</a>
<ul>
<li><a href="#">Vierter Level 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Menüs mit CSS: jq_menues_java1.xhtml
Menüs mit CSS: jq_menues_java1.css
a {
text-decoration:none; /* kein Unterstreichen */
}
a:hover {
color:#000000; /* maus, hover=schweben über Element */
}
/* alle ul's */
ul {
width:450px;
list-style-type:none; /* alle ul's keine punkt */
margin:10px;
}
Menüs mit CSS: jq_menues_java1.css
/* diese Elemente liegen UNTER den oberen der ersten Ebene */
ul ul {
/* display:none; */
opacity:0;
width:150px;
margin:0;
position:absolute; /* nun unabhängig */
left:-9999px; /* versteckt */
top:26px;
}
ul ul ul {
left:150px; /* 3. Menü nach rechts */
top:50;
}
Menüs mit CSS: jq_menues_java1.css
/* alle ersten Elemente liegen in einer Reihe, dank float */
li {
float:left;
position:relative;
padding:5px 15px 5px 5px;
background-color:#EEEEFF;
} li li {
float:none; /* nun wieder untereinander */
width:150px;
background-color:#CCCCCC;
padding:0;
Menüs mit CSS: jq_menues_java1.css
li:hover li { height:26px;
}
/* anzeige des 2. Menüs */
li:hover ul { display:block;
}
/* 1. submenu anschalten */
ul li:hover ul { left:0;
opacity:1;
}
Menüs mit CSS: jq_menues_java1.css
/* 2. und 3. ausschalten */
ul li:hover ul ul, ul li:hover ul ul ul { left:-9999px;
opacity:0;
}
/* 2. und 3. Menü anschalten */
ul ul li:hover ul, ul ul ul li:hover ul { /* display:block;*/
left:150px;
opacity:1;
}
Menüs mit jQuery: jq_menues_jq1.xhtml
var flyout = {
init: function() {
var $obj = $("ul li");
// hover( infunction, outfunction)
$obj.hover( function(){
$(this).find('ul').first().stop(true, true).slideDown(300);
},
function(){
$(this).find('ul').first().stop(true, true).slideUp(300);
});
} // init }; // var flyout
$(document).ready(flyout.init);
Menüs mit jQuery: jq_menues_jq1.xhtml
var flyout = {
init: function() {
var $obj = $("ul li");
if (!$obj.length) return;
$("html").removeClass("no-js"); // entfernt die CSS-Lösung
$obj.hover( function(){
$(this).find('ul').first().slideDown(300);
},function(){
$(this).find('ul').first().slideUp(300);
});
} // init }; // var flyout
Menüs mit jQuery: jq_menues_jq2.xhtml
var flyout = {
init: function() {
var $obj = $("ul li");
if (!$obj.length) return;
$("html").removeClass("no-js");
$obj.hover( function(){
$(this).find('ul').first().stop(true, true).slideDown(300);
},function(){
$(this).find('ul').first().stop(true, true).slideUp(300);
});
} // init }; // var flyout
$(document).ready(flyout.init);
2. Beispiel: Erläuterung
$(document).ready(• Besser als onload, VOR den Bildern
Anonyme Funktion• $("#box);
• // 2. Bsp: suche alle Abschnitt mit id=box, return liste
• $("#box p")
• // 3. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt
• $("#box p:contains('Zweiter Absatz')")
• // 4. Bsp: suche alle Abschnitt mit id=box in einem p- Abschnitt, die
• Einen Text enthalten
• addClass("green");
• Füge class hinzu
Tabpages mit jQuery
Tabpages mit jQuery: Idee / Struktur: jq_tabreiter0
<div class="tabs" title="(1): jQuery Befehle">
<p>
hier ist viel Text hier ist viel Text hier ist viel Text
</p>
</div>
<div class="tabs" title="(2) Traversierung">
<p>
hier ist viel Text hier ist viel Text hier ist viel Text
</p>
var makeTabs = { init: function() {
var $pages = $("div.tabs"); if ($pages.length==0) return;
$pages.addClass("dyn-tabs");
$pages.first().show();
var tabNavigation = $('<ul id="tabs" />').insertBefore($pages.first());
$pages.each(function() {
var listElement = $("<li />");
var label = $(this).attr("title") ? $(this).attr("title") : "Kein Label";
listElement.text(label);
tabNavigation.append(listElement);
});
var items = tabNavigation.find("li");
items.first().addClass("current");
items.click(function() {
items.removeClass("current");
$(this).addClass("current");
$pages.hide();
$pages.eq($(this).index()).fadeIn("slow");
}); } };
$(document).ready(makeTabs.init);
• Id „tabs“ zur Identifizierung, title als Register-Überschrift
Liste• Einfügen einer Liste VOR den div‘s
• Für alle div‘s
• Holen des Titels
• Eintrag als <li>
Anzeige• Suche den ersten Eintrag, hinzufügen „current“
• Click-Event zu allen Listenelementen
• Löschen aller „current“-Selektoren
• Aktuelle bekommt einen „current“-Selektor
• Alle <li> verstecken
• Das aktuelle Element anzeigen
Tabpages mit jQuery: Idee / Struktur
Tabpages mit jQuery: Neue Variante: tabreiter4
Tabpages mit jQuery: Neue Variante: tabreiter4
<ul class='tabs'>
<li><a href='#tab1' >Tab 1</a></li>
<li><a href='#tab2' >Tab 2</a></li>
<li><a href='#tab3' >Tab 3</a></li>
</ul>
<div class='tabMargin' id='tab1'>
<h3>Alle Befehle werden mit dem $() eingegeben</h3>
</div>
<div class='tabMargin' id='tab2'>
<b>Ancestors</b>
</div>
Tabpages mit jQuery: jQuery: tabreiter4
$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content;
var $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
Tabpages mit jQuery: jQuery: tabreiter4
$(this).on('click', 'a', function(e){
$active.removeClass('active'); // Make the old tab inactive.
$content.hide();
$active = $(this); // Update the variables with the new link and content
$content = $(this.hash);
$active.addClass('active'); // Make the tab active.
$content.show();
e.preventDefault(); // Prevent the anchor's default click action });
});
Akkordeon JavaScript: ajax4 / ajax5
Akkordeon JavaScript: ajax4 / ajax5 aus dem Jahr 2012
<div onmousedown="fb('fb1');">
<h3>Automatisierung und Informatik</h3>
<div id="fb1" style="display:none">
…
</div>
</div>
<div onmousedown="fb('fb2');">
<h3>Verwaltungswisssenschaft</h3>
<div id="fb2" style="display:none">
…
</div>
Akkordeon JavaScript: ajax4 / ajax6 aus dem Jahr 2012
function fb(sId) { DeleteAll();
var element = document.getElementById(sId);
if ( element.style.display == 'none' ) element.style.display = 'block';
else
element.style.display = 'none';
} // fb
Akkordeon JavaScript: ajax4 / ajax6 aus dem Jahr 2012
function DeleteAll() {
var element = document.getElementById("fb1");
element.style.display = 'none';
element = document.getElementById("fb2");
element.style.display = 'none';
element = document.getElementById("fb3");
element.style.display = 'none';
}
function DeleteAll() {
var element = document.getElementById("fb1");
element.style.display = 'none';
element = document.getElementById("fb2");
element.style.display = 'none';
element = document.getElementById("fb3");
element.style.display = 'none';
}
function DeleteAll() {
var items=new Array("fb1", "fb2", "fb3");
for (var i=0; i<items.length; i++) {
var element = document.getElementById( items[i] );
element.style.display = 'none';
} // for }
Akkordeon jQuery: jq_akkordeon_4
<h3 class="bar">Automatisierung und Informatik</h3>
<div class="content">
<ul>
<li> Informatik IB </li>
<li> Informatik PSC </li>
<li> Medieninformatik </li>
<li> Wirtschaftsinformatik </li>
</ul>
</div>
var accordeon = { init: function() {
var $content = $(".content"); // Klasse content, n-Elemente var $bar = $(".bar"); // Klasse bar
if (!$content.length || !$bar.length) return;
$content.hide(); // aktuelles verstecken
$bar.click( function() {
$bar.removeClass("current"); // reset
$content.not(":hidden").slideUp('slow'); // offenes Element verstecken
$(this).next() // bar.next => content
.not(":visible") // wenn versteckt, down, add current .slideDown('slow')
.prev()
.addClass("current");
});
} }
$(document).ready(accordeon.init);
Kapitel_05/Beispiel-08-Treemenu/Listing-5-18.html
Listings/Kapitel_05/Beispiel-23-Table-Zebra/Listing-5-66.html
Listings/Kapitel_06/widgets/tab01.html
Kapitel_06/interactions/interaction_methods.html: Drag&Drop
http://jqueryui.com/accordion/
jQuery UI: 1. Beispiel
$(document).ready(function(){
// konfigurierter Dialog mit Buttons:
var derDialog = $('<div></div>').dialog({
autoOpen : false, // geht nicht von selber auf title : "Das ist jetzt komplett generiert", resizable : false,
// modal : true, buttons : {
OK : function(){ // Schalter „Ok“
$(this).dialog('close'); // schließen },
"Nee, gar nicht" : function(){ // Schalter „Abbruch“
$(this).dialog('destroy').hide(); // vernichten }
}
// Button zum Einblenden:
$('#btn').click(function(){
// bestehenden Dialog zeigen:
derDialog.dialog('open'); // (gleichwertig) mit Selektion });
// Button zum Ändern des Dialogtextes:
$('#btn2').click(function(){
derDialog.html('Das ist jetzt <b>neuer</b> Text');
alert('Der Text wurde geändert');
});
});
jQuery UI: 2. Beispiel
jQuery UI: 2. Beispiel
var derDialog;
$(document).ready(function(){
derDialog = $('<div></div>').dialog({
autoOpen : false, // geht nicht von selber auf title : "Eingabedialog",
resizable : true, // modal : true, buttons : {
OK : function(){ // Schalter „Ok“
$(this).dialog('close'); // schließen },
"Nee, gar nicht" : function(){ // Schalter „Abbruch“
console.log('Button 2 geklickt');
$(this).dialog('destroy').hide(); // vernichten }
}
// in onload
var html = '<label>Vorname'+
'<input type="text" name="vorname" value="" size="12" />' + '</label>'+'<br />'+
'<label>Nachname'+
'<input type="text" name="nachname" value="" size="12" />' + '</label>';
derDialog.html(html);
});
function showDialog() {
derDialog.dialog('open'); // (gleichwertig) mit Selektion } // showDialog
function changeDialog() {
var html = '<label>Nachname'+
'<input type="text" name="nachname" value="" size="12" />' + '</label>' + '<br />'+
'<label>Abteilung'+ '<br />'+
'<input type="radio" name="Abt" value="F_und_E" checked="checked" />
F und E'+ '<br />'+
'<input type="radio" name="Abt" value="Marketing" /> Marketing'+
'<br />'+
'</label>' + '<br />';
jq_table1.xhtml
table tr:hover:nth-child(odd) td{
background-color: yellow;
cursor:pointer;
}
table tr:hover:nth-child(even) td{
background-color: yellow;
cursor:pointer;
}
table tr:nth-child(odd) td{
background-color: #CCCCCC;
}
table tr:nth-child(even) td{
background-color: #FFFFFF;
}
tfoot {
border: 1px solid;
color: green;
text-align:center;
background-color: yellow;
}
thead{
border: 1px solid;
color: red;
background-color: blue;
}