jQuery Facets Plugin der Werbeagentur TN34.DE, Schorndorf, Stuttgart

Zurück zur Übersicht

//WERKSTATT

jQuery.tn34.facets

Kategorie:: jQuery
Autor:: Mario Alves
Version:: 1.2

Erstellungsdatum:: 22.09.2010
Programmiersprache:: JavaScript

Demo:

Demo 1 Demo 2 Demo 3 Demo 4

Download:

Das jQuery Facets-Plugin 1.1: facets_v1.1.zip
Das jQuery Facets-Plugin 1.2: facets_v1.2.zip

Features:

Clean & Valid Markup
Events
(before open, after open, before close, after close)
Debugger

Browser Support:

Firefox v2/3+
IE v6/7/8+
Opera v9/10/11+
Safari v3
Konqueror v4+

Optionen:

control (object): Selector des Steuerelementes.
(demo 1,3)
autoStart (integer): Öffnen eines Bereichs beim laden.
autoCliping (boolean): Automatisches setzen der "clip"-Werte (CSS) aller Bereiche.
(demo 1)
debug (boolean): Debugger einschalten. Wenn kein Firebug eingeschaltet ist, oder ein anderer Browser als Firefox verwendet wird, werden alle Meldungen am Ende der Seite angezeigt.
clipSpacing (integer): Abstände zwischen Bereiche.
(demo 1,2,3,4)
animationSpeed (integer): Animationsgeschwindigkeit.
(demo 2,3,4)
keepItOpened (boolean): Letzter geöffnete Bereich offen lassen.
(demo 1)
minimizeTimeout (integer): Verzögerung beim schließen eines Bereiches.
(demo 2)
contentRelations (boolean): Hervorhebung aller "a"-Elemente mit der Bereichs-Id des geöffneten Bereichs im "rel"-Attribut druch Zuweisung der CSS-Klasse "on".
(demo 1,2)
sense (boolean): Durch das setzen des einer entsprechenden Bereichs-Id im "rel"-Attribut in "a"-Elemente, wird beim mouseover auf das "a"-Element der entsprechende Bereich geöffnet.
(demo 2)
activePanel (boolean): Beim benutzen eines Panel-Steuerelementes (beispielsweise: eine darüberliegende Navigationsleiste) reagiert das Panel selbst nicht mehr auf mouseover. Durch einschalten des "activePanel"-Feature reagiert das Panel ebenfalls auf mouseover und öffnet falls vorhanden, den Navigationsbaum des zugewiesenen Menüpunktes.
(demo 4)
minWidth (integer): Beim öffnen eines Bereiches bleiben andere Bereich mindestens um die im minWidth angegebene Breite sichtbar.
(demo 2)
beforeMax (function): Diese Funktion wird aufgerufen bevor ein Bereich geöffnet wird.
(demo 1,2,3,4)
afterMax (function): Diese Funktion wird aufgerufen nachdem ein Bereich geöffnet wurde.
beforeMin (function): Diese Funktion wird aufgerufen bevor ein Bereich geschlossen wird.
(demo 2,3,4)
afterMin (function): Diese Funktion wird aufgerufen nachdem ein Bereich geschlossen wurde.

Methoden:

jQuery.facets.resetClips() (boolean): Bereichsaufteilung zurücksetzen.
jQuery.facets.open() (integer): Bereich öffnen.
jQuery.facets.close() (integer): Bereich schliessen.
jQuery.facets.lock() (integer): Bereich öffnen und geöffnet lassen.
Bereich bleibt auch beim verlassen des Steuerelementes (mouseleave) geöffnet.
Beispiel in Demo 1, bei mouseleave schliesst dich der Bereich automatisch, bei einem Klick auf eines der Steuerelemente bleibt der jeweilige Bereich geöffnet.
jQuery.facets.unlock() (integer): Bereiche werden bei mouseleave wieder automatisch geschlossen.
jQuery.facets.restore(): Die beim initiieren des Facets-Plugin gesetzte Einstellung zum "Bereiche bei mouseleave geöffnet lassen" wird wieder hergestellt.

Anwendung:

Um TN34.Facets nutzen zu können, benötigt ihr das jQuery-Framework ab Version 1.4.2 und das clip-Plugin welches im bereitgestellten download enthalten ist.

<link rel="stylesheet" href="css/timetabs.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.clip.js" type="text/javascript"></script> <script src="js/jquery.facets.min.js" type="text/javascript"></script>

JavaScript: (Beispiel aus Demo 2)

Zuletzt startet man Skript unter Verwendung der $(document).ready()-Funktion.

 <script type="text/javascript">
jQuery(document).ready(function() {
        jQuery('#main-image-box').children().removeClass('facets').end().facets({
                clipSpacing: 2,
                minWidth: 25,
                animationSpeed: 350,
                sense: true,
                contentRelations: true,
                beforeMax: function(index) {
                        $('#main-image-box .clip:eq('+index+') .infotext').show();
                },
                beforeMin: function(index) {
                        $('#main-image-box .clip:eq('+index+')').find('p').hide().end().find('.infotext').hide();
                }
        });
});
</script>

HTML: (Beispiel aus Demo 2)

Als nächstes benötigt ihr etwas HTML.

<div id="main-image-box">
<div class="clip facets" id="elefant">
<div class="container">
<h1>Elefant</h1>
<p><span>Die Elefanten (Elephantidae)  bilden eine Familie der R&uuml;sseltiere. Diese Familie umfasst alle heute noch lebenden Vertreter der R&uuml;sseltiere.</span> <a class="wikipedia" target="_blank" href="http://de.wikipedia.org/wiki/Elefant">wissenswertes</a></p>
<div><a class="infotext"><span class="i">i</span> <span class="text">Hier klicken f&uuml;r weitere Infos</span></a></div>
</div>
</div>
<div class="clip facets" id="giraffe">
<div class="container">
<h1>Giraffe</h1>
<p><span>Die Giraffe (Giraffa camelopardalis) ist ein S&auml;ugetier aus der Ordnung der Paarhufer. Sie ist das h&ouml;chste landlebende Tier der Welt. Zur Unterscheidung vom verwandten Okapi (der Waldgiraffe) wird sie auch als Steppengiraffe bezeichnet.</span> <a class="wikipedia" target="_blank" href="http://de.wikipedia.org/wiki/Giraffe">wissenswertes</a></p>
<div><a class="infotext"><span class="i">i</span> <span class="text">Hier klicken f&uuml;r weitere Infos</span></a></div>
</div>
</div>
<div class="clip facets" id="loewe">
<div class="container">
<h1>L&ouml;we</h1>
<p><span>Der L&ouml;we (Panthera leo, veraltet/poetisch Leu) ist eine Art der Katzen. Er lebt im Unterschied zu anderen Katzen in Rudeln, ist durch die M&auml;hne des M&auml;nnchens gekennzeichnet und ist heute in Afrika sowie im indischen Bundesstaat Gujarat beheimatet.</span> <a class="wikipedia" target="_blank" href="http://de.wikipedia.org/wiki/L%C3%B6we">wissenswertes</a></p>
<div><a class="infotext"><span class="i">i</span> <span class="text">Hier klicken f&uuml;r weitere Infos</span></a></div>
</div>
</div>
<div class="clip facets" id="zebra">
<div class="container">
<h1>Zebra</h1>
<p><span>Das Grevyzebra (Equus grevyi) ist ein Zebra aus der Familie der Pferde (Equidae) und geh&ouml;rt zur Ordnung der Unpaarhufer (Perissodactyla). Die Art ist nach dem ehemaligen franz&ouml;sischen Pr&auml;sidenten Jules Gr&eacute;vy benannt, dem in den 1880er Jahren ein Tier von der Regierung Abessiniens geschenkt wurde.</span> <a class="wikipedia" target="_blank" href="http://de.wikipedia.org/wiki/Grevyzebra">wissenswertes</a></p>
<div><a class="infotext"><span class="i">i</span> <span class="text">Hier klicken f&uuml;r weitere Infos</span></a></div>
</div>
</div>
</div>

Zurück zur Übersicht

Kommentare:

Mo, 10.17.2011 - 15:59 von andreas

In der Version 1.2 wurde der Opera Bug gefixt.
Es wird jetzt bei Opera ein kompletter Reset nach dem minimize durchgeführt. Das ist zwar etwas langsamer, aber besser als leere Bilderboxen.

Di, 07.26.2011 - 21:39 von cardaddy

Many thanks for your review! I really liked it.

Sa, 07.16.2011 - 13:15 von Gast

There is a bug in Opera 11, image disapears on mouse over.

= = = =
TN34.DE
= = = =
You are right. We will check this. Perhaps we'll find a workaround for Opera. But that has not a high priority.

Mi, 06.22.2011 - 04:22 von Gast

menu slideUp?

======
TN34.DE
======
Currently this feature is contemplating, but there is still no roadmap.

Fr, 04.15.2011 - 16:06 von neptunix

It it possible to make horizontal-styled areas and expand them vertically?

======
TN34.DE
======
Thx for your comment. We will check it.

Mi, 02.16.2011 - 17:46 von friemae

Jetzt hab ich versucht was zu entwickeln, das es schon gibt :-/ Hätte ich eure Seite nur mal früher gefunden!
Hier mein aktueller Stand: http://balaur.de/fslider.html
Funktioniert leider noch nicht in Safari&chrome und iwie auch nicht im IE, aber ich glaub nicht, dass ich überhaupt noch weiter mache... das Leben schuldet mir ne Flasche Wein
Klasse Arbeit!