Beitrag erstellt am
9. Februar 2010
unter Web 2.0.
Hier kannst Du die Kommentare per RSS 2.0 abonieren.
Du kannst entweder einen Kommentar oder einen Trackback von Deiner eigenen Seite hinterlassen.
input type=”file” per jQuery Plugin stylen
Ich bin bei der Entwicklung eines Projektes gestern mal wieder auf ein Problem gestoßen, welches ich letztendlich mit einem jQuery Plugin lösen konnte. Damit sich andere Entwickler nicht auch einen mit dem Stylen von irgendwelchen durch CSS gefakte und übereinandergelegte Formularfelder abbrechen müssen, stelle ich lieber mal das Plugin vor.
Ihr kennt als Designer bzw. Entwickler sicher auch das Problem des prinzipiell unstylebaren Formularfeld für den Dateiupload. Ihr wisst schon was ich meine. Das Feld mit dem darauf folgenden “Durchsuchen…” Button, oder besser gesagt das Input Feld des Typs file. Der Befehl erzeugt das o.g. Feld mit dem Button. Versucht man dieses nun per CSS zu stylen, wird man schnell an gewisse Grenzen stoßen und nach einer Zeit einsehen müssen, dass es prinzipiell durch CSS nicht wirklich anpassbar ist.
Es gibt verschiedene Vorschläge, bei denen man sich durch die verschiedenen Browsereigenheiten und natürlich durch das mehr oder weniger dafür zusammengefrickelte CSS so was von einen abbricht, dass man wirklich nicht mehr genau weiß wo einem der Kopf steht. Man bekommt das ganze zwar irgendwann hin, aber man weiß tief im Inneren ganz genau, dass es total unsauber gelöst ist. Und an genau dieser Stelle sagt sich der perfektionistisch veranlagte Webdesigner: “Nee, das muss auch besser bzw. anders gehen…”.
Da es für das jQuery Framework massig Plugins und Lösungen gibt, habe ich mich dazu mal umgeschaut. Mir war bekannt, dass es etliche Möglichkeiten gibt HTML Formulare generell per jQuery-Plugins zu stylen. Es ist unter anderem z.B. möglich “styleimmune” radio-Elemente oder Input-Felder des Typs checkbox zu verschönern. Auch Select-Boxen lassen sich mittels jQuery einfach überarbeiten. Das Prinzip für das Feld des Typs file ist genau das gleiche. Das Ganze lässt sich anhand von fünf Schritten lösen:
- Man setzt das gewünschte File Element (<input type=”file” />) in einen relativ positionierten div-Container.
- In diesen Container setzt man zusätzlich ein normales Textfeld (<input type=”text” />) und einen Button, welcher der spätere, gefakte “Durchsuchen…”-Button sein soll. Die beiden letzteren Elemente positioniert man nun absolut und schiebt diese genau an die Position des in Punkt 1. gesetzten, relativ positionierten File Elements.
- Nun muss das File Element mit einem höheren z-index versehen werden als das normale Textfeld. Auf diese Weise legt man das File Element logisch über das Textfeld und den Button. Das Textfeld und der Button sind dadurch quasi nicht erreichbar, was aber nicht wirklich von Bedeutung ist.
- Nun muss man das File Element zwar ausblenden, jedoch nicht verstecken. Die CSS Eigenschaft visibility hidden kann demnach nicht verwendet werden, denn das File Element soll trotz Unsichtbarkeit funktionieren. Demnach nutzt man die CSS Eigenschaft opacity und setzt diese gleich Null. Nun kann das Feld, obwohl es nicht sichtbar ist genutzt werden. Liegt das gefakte Formular nun aufgrund des niedrigeren z-index genau darunter, bekommt es durch seine Sichtbarkeit den Anschein genau das Formular zu sein, obwohl das unsichtbare Formular eigentlich die Funktion gewährleistet.
- Ein kleiner Schönheitsfehler ist dann noch die herzustellende Sichtbarkeit des Pfads der hochzuladenden Datei. Hierzu kopiert man einfach via Javascript Befehl die Value aus dem File-Element in das Textfeld und fertig ist das perfekt gestylte Uploadformular.
Diese Lösung könnte man nun natürlich zu Fuß realisieren, oder der Bequemlichkeit halber einfach mit dem jQuery Plugin File-Style. Schaut es euch mal an. Das spart wirklich viel Arbeit…
Verwandte Beiträge:
Entwicklung des WordPress Plugin “Favicon Advertising” (Teil II)...
in Arbeit: ein WordPress Plugin zur besseren Blog Monetarisierung...
WordPress Plugin zum Favicon Advertising nimmt Form an...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
Danke für den Tipp, der Link ist hilfreich!