Diesmal gibt es keinen Code von mir, sondern einen kleinen Erfahrungsbericht über PHP-Frameworks.
Ist es sinnvoll, sein eigenes PHP-Framework zu entwickeln?
Meine Antwort dazu ist klar: Ja, auf jeden Fall!
Aber warum? Es gibt doch so viele gute Frameworks, die stabil sind und so viele Module haben. Warum soll ich das Rad neu erfinden?
Heute stelle ich mal mein erstes öffentliches jQuery Plugin vor.
In Prinzip eine ganz simple Funktion, aber ungemein hilfreich.
Jeder hat bestimmt schon riesige Select-Felder gehabt, in denen man mehrere Werte auswählen muss. Und wenn man sich dann nur einmal verdrückt oder vergisst, die STRG-Taste gedrückt zu halten, muss man wieder von vorne anfangen. Sehr ärgerlich, aber das lässt sich jetzt endlich verhindern. Mit meinem kleinen jQuery Plugin „Multiple Select“ werden die ausgewählten Optionen im Select-Feld nicht entfernt, wenn man ein anders Feld anklickt und das Ganze ohne großen Schnickschnack.
Anleitung + Demo + Download (Englisch)
Das Plugin ist veröffentlicht unter GNU/GPL.
Wer denkt, dass man für eine Drop-Down Navigation ein großes jQuery Plugin braucht, der liegt falsch. Ein solches Menü lässt sich nämlich mit weniger als 10 Zeilen JavaScript-Code realisieren. Zwar ist dafür erst einmal nur eine Ebene möglich, aber es soll ja einfach und schnell gehen.
Am Anfang steht der HTML-Code. Erklären muss ich dazu hoffentlich nichts. Der größte Teil ist langweilige Schreibarbeit.
<div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li> <a href="aktuelles.html">Aktuelles</a> <ul> <li><a href="news.html">News</a></li> <li><a href="veranstaltungen.html">Veranstaltungen</a></li> <li><a href="archiv.html">Newsarchiv</a></li> </ul> </li> <li> <a href="m3.html">Menüpunkt 3</a> <ul> <li><a href="u1.html">Unterpunkt 1</a></li> <li><a href="u2.html">Unterpunkt 2</a></li> <li><a href="u3.html">Unterpunkt 3</a></li> <li><a href="u4.html">Unterpunkt 4</a></li> <li><a href="u5.html">Unterpunkt 5</a></li> </ul> </li> </ul> </div> |
Ob ihr es nun glaub oder nicht, aber jetzt kommt der schwierigste Teil der Drop-Down Navigation. Bis man hier das gewünschte Aussehen erreicht hat, vergeht schon ein wenig Zeit, aber das wäre bei jedem anderen Plugin auch nicht anders.
#nav {} #nav ul{ list-style-type:none; margin:0; padding:0; } #nav li { float:left; padding:0; margin:0;} #nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; } #nav li a:hover { color:#f00; } #nav ul ul { display:none; position:absolute; z-index:999; } #nav li li { float:none; } #nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; } * html li li { display:inline; } /* IE6 Bugfix... */ |
So, und hier beginnt der magische Teil.
$(document).ready(function() { $("#nav li:has(ul)").hover(function(){ $(this).find("ul").slideDown(); }, function(){ $(this).find("ul").hide(); }); }); |
Durch das Hover-Event, das wir dem li-Tags zuweisen, haben wir zwei Funktionen, die erst beim Mouseover und beim Mouseout ausgeführt werden. Der Unterschied zu den normalen Mouseover und Mouseout Events ist, dass die zweite Funktion erst ausgeführt wird, wenn die erste beendet ist. So entstehen keine merkwürdigen Effekte, wenn die Mouse zu schnell bewegt wird.
Vorher sollte im Head natürlich jQuery eingebunden werden:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> |
Und das war’s auch schon. Kein großes Plugin, keine große Konfiguration, dafür ist der Code schnell eingebunden und es funktioniert in jedem bekannten Browser.
UPDATE 27.05.2011: Funktioniert nun auch im IE6 und IE7.