jquery Tutorial 3 – Wie sieht jQuery auf der Seite aus?

jquery Tutorial 3 – Wie sieht jQuery auf der Seite aus?

Nachdem Sie im ersten Teil und im zweiten Teil dieses Tutorials einen kurzen Überblick über die Funktionsweise von jQuery bekommen haben soll es nun um die Anwendung von jQuery gehen. Ähnlich wie Cascading Style Sheets CSS kann man dem jQuery-Skript anhand von IDs, Klassen oder auch Tags mitteilen welche Veränderungen an welchem Element bzw. an welcher Elementgruppe vorgenommen werden sollen. Hier der Code für das vorangegangene Beispiel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Demo Page</title> <link type="text/css" href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.6.2.min.js "></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#accordion').accordion({ header: 'h3', autoHeight: false, collapsible: true, active: false }); // Tabs $('#tabs').tabs(); // Dialog $('#dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); // Dialog Link $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return false; }); // Datepicker $('#datepicker').datepicker({ inline: true }); // Slider $('#slider').slider({ range: true, values: [17, 67] }); // Progressbar $("#progressbar").progressbar({ value: 20 }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} #accordion h3 {padding-left:30px;} </style> </head> <body> <h1>Accordion</h1> <div id="accordion"> <h3>Hier klicken um mehr Text zu sehen</h3> <p>Hier sehen Sie jetzt noch mehr Text der aber nur erscheint, wenn man vorher auf die Headline geklickt hat</p> </div> <h1>Tabs</h1> <div id="tabs"> <ul> <li><a href="#one">Lorem ipsum</a></li> <li><a href="#two">Steinlaus</a></li> <li><a href="#three">De bello Gallico</a></li> </ul> <div id="one"><h3>Lorem ipsum</h3> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> <div id="two"><h3>Die Steinlaus</h3> (Petrophaga lorioti) ist ein von Loriot in einem Sketch bei der Imitation von Bernhard Grzimek präsentiertes fiktives Nagetier. 1983 nahm das medizinische Wörterbuch Pschyrembel die Steinlaus als fingierten Lexikonartikel (Nihilartikel) ins Nachschlagewerk auf. Seitdem ist die Steinlaus ein bekanntes Beispiel des wissenschaftlichen Witzes. Quelle: wikipedia.de</div> <div id="three"><h3>Liber I</h3> Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. </div> </div> </body> </html>