aktuelles Element in der Seiten-Navigation finden und markieren
Samstag, 27 Juni 2009
Gegeben sei eine Web-Applikation, vielleicht XTC oder OsCommerce, irgendein CMS. In der Navigationzeile sollte die jeweils aktuell angezeigte Seite markiert sein. Im Template war das seltsamerweise nicht vorgesehen, in die Tiefen der Applikation wollte ich aber auch nicht weiter eindringen. Eine Lösung mit jquery, ja das wäre doch ganz schön.
Die Markierung kann eine CSS-Klasse übernehmen, mit jquery kein Thema. Als erstes muss die Seite ermittelt werden, die aktuell dargestellt wird. Klar, könnte man mit PHP herausfinden. Geht aber auch mit Javascript, window.location.pathname.
<script src="jquery.js"></script>
<script type="text/javascript">
function str_replace(search, replace, subject){
return subject.split(search).join(replace);}
$(document).ready(function(){
var gpath=window.location.pathname;
var lpath = gpath.split("/");
var anzahl= lpath.length;
var myPath=lpath[anzahl-1];
var rep_myPath = str_replace(".php", "", myPath);
$("#"+rep_myPath).addClass('myhover');
}); // document ready
</script>
Die Funktion str_replace(), die so wunderbare Dienste in PHP leistet, gibt es nativ nicht in Javascript. Aber Hendrik Richter sei dank, steht uns diese Funktionalität auch in Javascript zur Verfügung.
First of all, ermitteln wir mit window.location.pathname den absoluten Pfad zur aktuellen Datei. Daraus machen wir ein Array, indem wir an den Slashes(/) mitsplit() den String trennen. Wichtig ist nur das letzte Array-Element, steht dort doch der gewünschte Dateiname. Wir zählen also die Anzahl Array-Elemente mit length, weil die Indexes des Array mit 0 beginnen, ziehen wir 1 wieder ab, und erhalten das letzte Array-Element var myPath=lpath[anzahl-1];.
Jetzt kommt die bereits angesprochene str_replace-für-javascript- Funktion ins Spiel. Wir entfernen den Punkt aus dem Dateinamen, der würde später jquery stören. (Okay, Okay, geht auch anders, so konnte ich aber die JS-Funktion mal in der Praxis testen). Heißt die aktuelle Datei warenkorb.php so steht in unserer Variablen rep_myPath = 'warenkorb';. Wir bestücken nun im Template der XY-Applikation alle Navigationslinks mit eindeutigen IDs, z.B. id="warenkorb", wenn die Datei warenkorb.php heißt. Mit $("#"+rep_myPath).addClass('myhover'); erhält der Navigationslink der aktuellen Seite schlussendlich die CSS-Klasse myhover verpasst.
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.