Beispiele

Eine FAQ-Seite

Auf ganz einfache Weise kann mit der Klasse TextToggle eine ein- und ausklappbare FAQ-Liste gebaut werden.

Der Vorteil des Einsatzes der JS-Pocket-Lib wird bei einem Blick in das HTML-Markup deutlich: es enthält kein Inline-Javascript. Die Seite ist auch für Besucher ohne Javascript nutzbar und kann leicht editiert werden.

HTML-Quellcode der Liste "Fragen und Antworten"Quellcode zeigen Quellcode ausblenden

<div class="faq">
	<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit? <a href="#" class="showAnswer">&raquo;</a><a href="#" class="hideAnswer">&laquo;</a></h2>
	<p>Duis purus nunc, molestie quis, varius sit amet, accumsan id, urna. Sed euismod leo. Nam elementum mauris hendrerit risus. Morbi non felis in augue posuere gravida. Nam quam neque, fringilla sodales, aliquet eu, scelerisque id, orci. Nullam porta sem iaculis leo. Duis eu nulla. Suspendisse venenatis neque et dui. Maecenas convallis mi eu libero. Nunc ut massa. Ut et mi. Nulla et diam.</p>
</div>

<div class="faq">
	<h2>Nullam venenatis sem pellentesque ligula? <a href="#" class="showAnswer">&raquo;</a><a href="#" class="hideAnswer">&laquo;</a></h2>
	<p>Aliquam erat volutpat. Quisque ipsum diam, placerat a, malesuada vitae, sagittis pellentesque, orci. Suspendisse dui. Aenean neque. Nam tortor. Aliquam commodo mollis tellus. Sed mauris arcu, mollis eu, pharetra in, imperdiet molestie, massa. Nullam quis lectus vel urna feugiat nonummy. Fusce gravida, orci sit amet posuere condimentum, nibh ante sagittis sem, eu suscipit dui mauris nec velit.</p>
	<p>Duis sodales sem ut turpis. Aliquam erat volutpat. Proin at quam. Duis ac velit. Cras mauris. Ut lacinia diam quis velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="faq">
	<h2>Morbi viverra est eget eros pellentesque bibendum? <a href="#" class="showAnswer">&raquo;</a><a href="#" class="hideAnswer">&laquo;</a></h2>
	<p>Donec non leo. Nullam venenatis, ligula in consequat commodo, mauris dui posuere diam, ac tristique ipsum nunc id nibh. Pellentesque non tellus. Vestibulum consequat. Morbi tincidunt, ipsum at aliquam sodales, tellus elit mollis urna, ac suscipit dolor ante pharetra nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id enim. Sed eu est. Etiam imperdiet nisl eu odio dapibus accumsan.</p>
</div>

<div class="faq">
	<h2>Sed ac tortor? <a href="#" class="showAnswer">&raquo;</a><a href="#" class="hideAnswer">&laquo;</a></h2>
	<p>Donec eros velit, hendrerit nec, rutrum vel, tempus sed, dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut ligula enim, pretium sit amet, adipiscing non, consequat sed, ipsum. Donec vestibulum laoreet elit. Mauris scelerisque, urna at pretium placerat, odio erat blandit ipsum, at sollicitudin nulla nunc eget lacus. Nullam magna. Nunc tempus enim et mi euismod commodo.</p>
	<p>Aliquam erat volutpat. Ut egestas, nisl a elementum elementum, massa sem sagittis quam, id fringilla enim orci vitae odio. Pellentesque nunc erat, fringilla et, tempor a, dictum ut, arcu. Cras volutpat arcu non felis. Proin eleifend tristique tortor. Curabitur dictum. Suspendisse hendrerit turpis eu tortor interdum hendrerit. Nullam blandit sem. In hac habitasse platea dictumst. Duis blandit dictum lacus. Cras magna lectus, luctus sodales, cursus ac, iaculis ut, leo. Duis accumsan consequat libero.</p>
</div>

<div class="faq">
	<h2>Nullam lacus? <a href="#" class="showAnswer">&raquo;</a><a href="#" class="hideAnswer">&laquo;</a></h2>
	<p>Ut vulputate metus nec lectus. Donec nec nisi. Aliquam erat volutpat. Fusce dui odio, aliquet ac, malesuada quis, lacinia quis, ligula. Proin vestibulum. Mauris eu ipsum. Fusce dolor tortor, pulvinar id, posuere vel, porttitor eu, tortor. Nunc nec lacus ut lectus bibendum rhoncus. Praesent tincidunt risus nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tristique, quam vitae cursus suscipit, quam justo pharetra metus, ac pulvinar enim ligula ut eros. Ut volutpat leo sit amet mi. Aliquam lobortis. Sed faucibus pretium turpis.</p>
</div>

Um die Funktionalität des Ein- und Ausklappens zu erreichen, wird gar nicht viel Code benötigt. Die ersten sieben Zeilen der Funktion initLocalObjects() dienen dazu, uns die Arbeit etwas zu erleichtern: es wird allen DIV-Elementen mit der Klasse "faq" automatisch eine ID zugewiesen. Diese IDs wiederum werden dann als Array an den Konstruktor unseres TextToggle-Objektes übergeben. Ohne diese sieben Zeilen hätten wir im HTML-Markup jedem FAQ-Element von Hand eine ID geben müssen, und der Aufruf des TextToggle-Konstruktors hätte etwa so ausgesehen: var myTextToggle = new TextToggle(new Array('faq_0', 'faq_1', 'faq_2', ...), 'showAnswer', 'hideAnswer');. Wenig elegant und noch weniger flexibel, da man so jedesmal den Konstruktoraufruf ändern müßte, wenn ein Frage-Antwort-Paar hinzukommt oder entfernt wird.

Lokales Javascript der Seite "Fragen und Antworten"Quellcode zeigen Quellcode ausblenden

var myController, myTextToggle;
function initLocalObjects() {
	var faqNodes = document.getElementsByTagName('div');
	var faqNodeIds = new Array();
	for(var i=0; i<faqNodes.length; i++) {
		if(faqNodes[i].className == 'faq') {
			faqNodes[i].id = faqNodeIds[faqNodeIds.length] = 'faq_' + i;
		}
	}
	var myTextToggle = new TextToggle(faqNodeIds, 'showAnswer', 'hideAnswer');
	myTextToggle.init();
	var myController = new Controller();
	myController.registerEvents(new Array('click'));
	myController.registerClient(myTextToggle);
}
addLoadEvent(initLocalObjects);

Das Ergebnis sieht dann doch ganz passabel aus, wenn man sicherlich auch darüber diskutieren kann, ob das HTML nun optimal ist. Aus Sicht der Semantik wäre vielleicht eine Liste vorzuziehen, aber dafür müßte man die Klasse TextToggle ein wenig anpassen oder eine neue Klasse schreiben. - Aber hier kommt Ihr dann ins Spiel! ;)

Auch für die ausklappbaren Quellcode-Ausschnitte auf dieser und den anderen Seiten dieser Dokumentation wird übrigens die TextToggle-Klasse eingesetzt.

Kommentar zu dieser Seite schreiben

Kommentare zu dieser Seite

HuHu,

ich wollte nur mal DANKE sagen für das geile Schript für die FAQ :-)

Gruß ~Maus~

Kommentarfunktion ausgeschaltet

Ich würde eigentlich gerne Benutzern der JS-Pocket-Lib und anderen Entwicklern die Möglichkeit bieten, schnell und bequem Kommentare und Anregungen hier zu hinterlassen, denn so ein Feedback ist sehr wichtig für die Verbesserung der Bibliothek. Da aber bereits nach wenigen Tagen die Kommentarfunktion, die ich eingebaut hatte, von zerstörungswütigen Vollidioten massivst zum Spamming mißbraucht wurde und ich auf der anderen Seite daraus auch keinen Hochsicherheitstrakt machen wollte, habe ich die Kommentarfunktion wieder entfernt. Sorry an alle normalen Besucher und fuck yourself, Spammers!