Also, erstmal zum HTML-Aufbau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<div>
	<h3><a href="#">First</a></h3>
		<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	           </div>
	<div>
		<h3><a href="#">Second</a></h3>
		<div>Phasellus mattis tincidunt nibh.</div>
	</div>
	<div>
		<h3><a href="#">Third</a></h3>
		<div>Nam dui erat, auctor a, dignissim quis.</div>
	</div>
</div>

Das ist der Standardaufbau des Accoridons aus jQuery UI. Das CSS entstammt dem jQuery UI CSS Framework.
Damit können Themes einfach, im Prinzip durch eine standardisierte Benamung von Elementen, ausgetauscht werden.

Nun zum Javascript Code. Er beinhaltet den Aufruf des Accordions und die Registrierung der Mouseevents.
Wir wollen das Accordion erst nach einer kleinen Verzögerung schließen, deshalb benutzen wie die Funktion setTimout. Falls der Benutzer innhalb dieser Zeit wieder mit dem Cursor über das Accordion fährt, muss dieser Timeout abgebrochen werden. Deshalb speichern wir
das Timeout-Objekt in einer globalen javascript Variabeln (tObj). Mittels der Funktion clearTimeout wird dieser Timout nun vorzeitig ohne Aufruf der Callback-Funktion beendet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
	var tObj;
 
	$(function(){
	           // simple accordion with special markup
		$('#accordion').accordion({
			header: 'h3',
			active: '.selected',
			collapsible: true,
			autoHeight: false
		});
 
		$("#accordion").mouseleave(function(){
		   	tObj=setTimeout("menu.accordion('activate', active);",3000);
 	           });
 
		$("#accordion").mouseenter(function(){
	     		clearTimeout(tObj);
   		});
 
	});
</script>

Da das Accordion in das Div mit der id “accordion” gehüllt ist, genügt es uns vollkommen die Events ebenfalls auf dieses Div zu legen.
Es bietet sich an die zwei Mousevents mittels Punktoperator zu verknüpfen. Die Funktionalität bleibt die gleiche, allerdings wird eine DOM Operation weniger ausgeführt. Was sich vor allem in Schleifen deutlich bemerkbar macht.
Verkettet sähe die Anweisung so aus:

1
2
3
4
5

	$("#accordion").mouseleave(function(){
		tObj=setTimeout("menu.accordion('activate', 'active');",3000);
               }).mouseenter(function(){
	    	clearTimeout(tObj);
	 });

Ein Beispiel dazu findet unter in unserem Demobereich.

And kind regards to Fabian Hallstein for his idea…

Ähnliche Artikel

• 12. November 2009 -- jQuery Präsentationen für ein besseres Verständnis
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.

Ähnliche Artikel

• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 27. Juli 2009 -- jQuery Tutorial – Closing an Accordion automatically
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem