Codeschnipsel Archive - oreillyblog

jQuery-Rezept: Textfelder automatisch vervollständigen

Nathalie Pelz — Wed, 21 Jul 2010 12:04:31 +0000

Problem Es gibt zwei HTML-Eingabefeld-Typen, bei denen ein Anwender einen Wert aus einer Liste bestehender Werte auswählen kann: Radio Buttons und Selects. Radio Buttons sind für Listen mit bis zu acht Einträgen sinnvoll, während Selects bis zu 30 oder 150 Einträgen noch gut anwendbar sind – abhängig von der Art der Daten. Wenn der Anwender aber auch einen neuen Wert eintragen kann, helfen sie nicht weiter – meist wird ihnen dann ein Feld »Andere« beigestellt. Wird die Liste richtig groß – 500 oder sogar 500.000 Einträge, dann sind auch sie nicht mehr verwendbar. Lösung Das Autocomplete-Widget von jQuery UI kann die verschiedenen Situationen abdecken, in denen ein Select nicht ausreichend ist. Im einfachsten Fall sind die anzuzeigenden Daten in einem JavaScript-Array verfügbar: Wählen Sie einen Monat aus: var months = [’Januar’, ’Februar’, ’März’, ’April’, ’Mai’, ’Juni’, ’Juli’, ’August’, ’September’, ’Oktober’, ’November’, ’Dezember’]; $("#month").autocomplete({ source: months }); Hier wenden wir das Autocomplete-Plugin auf ein Eingabefeld für einen Monat an, wobei die Daten in einem einfachen JavaScript-Array bereitgestellt werden. Sind die Daten noch nicht auf Client-Seite vorhanden, …

Der Beitrag jQuery-Rezept: Textfelder automatisch vervollständigen erschien zuerst auf oreillyblog.

PHP 5: Standard-Datenstrukturen nicht neu erfinden – Queues, Stacks und Co.

Nathalie Pelz — Fri, 23 Oct 2009 09:29:09 +0000

Problem Sie benötigen in Ihrem Programm Datenstrukturen, die PHP nicht out-of-the-box bietet (z.B. Stack, Linked-List oder Queue). Sie könnten diese mithilfe von Arrays als eigene Klasse implementieren, sind sich aber nicht sicher, ob Sie dabei nicht unnötig das Rad neu erfinden. Lösung Seit PHP 5.3 bietet die Standard PHP Library (SPL) einige dieser Datenstrukturen an. Die Klasse SplStack implementiert eine LIFO-Datenstruktur (Last-In-First-Out) und somit eine Datenstruktur, die sich wie ein Stack (engl. für Stapel) verhält: $stack = new SplStack(); $stack->push('a'); $stack->push('b'); $stack->push('c'); echo $stack->pop()."\n"; echo $stack->pop()."\n"; echo $stack->pop()."\n"; c b a Die Klassen SplHeap, SplMinHeap und SplMaxHeap implementieren eine Heap-Datenstruktur.SplHeap ist dabei eine abstrakte Klasse und kann nicht direkt instantiiert werden. In einem Heap werden die einzelnen Elemente anhand ihrer Schlüsselwerte in einer Baumstruktur abgelegt. SplMinHeap und SplMaxHeap implementieren jeweils die von SplHeap als abstrakt deklarierte Funktion compare(). SplMinHeap legt die hinzugefügten Elemente in aufsteigend sortierter Reihenfolge ab, SplMaxHeap dagegen in absteigend sortierter Reihenfolge: $heap = new SplMaxHeap(); $heap->insert('b'); $heap->insert('a'); $heap->insert('c'); echo $heap->extract()."\n"; echo $heap->extract()."\n"; echo $heap->extract()."\n"; c b a $heap = new SplMinHeap(); $heap->insert('b'); …

Der Beitrag PHP 5: Standard-Datenstrukturen nicht neu erfinden – Queues, Stacks und Co. erschien zuerst auf oreillyblog.

PHP 5: Callback-Funktionen mit einem Zustandsgedächtnis programmieren

Nathalie Pelz — Mon, 12 Oct 2009 12:45:25 +0000

Problem Sie benötigen eine Callback-Funktion. Eine einfache Funktion (z.B. ein Closure oder eine Lambda-Funktion) reicht aber für Ihre Zwecke nicht aus, da die Callback-Funktion einen eigenen Zustand halten – also ein Zustandsgedächtnis haben – soll. Lösung Seit PHP 5.3 haben Sie die Möglichkeit, von Funktionsobjekten Gebrauch zu machen. Dabei handelt es sich um Objekte, die wie Funktionen behandelt und demnach also auch wie Funktionen aufgerufen werden können: class Funktor { public function __invoke($wert) { print $wert . "\n"; } } $f = new Funktor; $f('Hallo Welt!'); Hallo Welt! Diskussion In Rezept 6.12 haben Sie gesehen, wie Lambda-Funktionen verwendet werden können, um z.B. ein Array mit der Funktion usort() zu sortieren. Diese Funktionen werden oft als Callback-Funktionen oder kurz Callbacks bezeichnet. Ein solches Callback übergibt man an eine beliebige Funktion, und diese ruft es mit diversen Parameterwerten auf. Die usort()-Funktion ruft ein Callback beispielsweise mit zwei Werten auf, die miteinander verglichen werden sollen. Die Callback-Funktion ist dabei nicht in der Lage, einen Zustand über mehrere Aufrufe hinweg zu halten. Einfach formuliert, könnte man sagen, sie hat …

Der Beitrag PHP 5: Callback-Funktionen mit einem Zustandsgedächtnis programmieren erschien zuerst auf oreillyblog.

PHP 5: Mit Namespaces Kollisionen zwischen Klassennamen verhindern

Nathalie Pelz — Thu, 01 Oct 2009 14:19:08 +0000

Problem Sie nutzen in Ihrer Applikation diverse Bibliotheken oder Frameworks und wollen Konflikte zwischen eigenen Klassen und Framework-Klassen mit identischen Namen vermeiden. Sie möchten dabei aber nicht den in PHP häufig angewandten Kompromiss eingehen und den Klassennamen verkomplizieren (z.B. MeinProjekt_MeineTeilanwendung_Meine-Klasse). Lösung Durch die Verwendung von Namespaces, die ab PHP 5.3 zur Verfügung stehen, können Sie eine saubere Trennung der Namensräume erreichen, ohne den Klassennamen künstlich zu verkomplizieren. Das folgende Codebeispiel zeigt, wie das aussehen könnte: namespace net\php\pear\Date { class DateTime { public function __construct() { print __CLASS__ . " created\n"; } } } namespace de\oreilly\phpckbk { class DateTime { public function __construct() { print __CLASS__ . " created\n"; } } $oreillyDateTime = new DateTime(); use net\php\pear\Date; $pearDateTime = new Date\DateTime(); $phpDateTime = new \DateTime(); print_r($phpDateTime); } Wie Sie sehen, werden im gezeigten Codebeispiel drei Klassen mit identischem Namen (DateTime) verwendet. Wir selbst bewegen uns im Namensraum de\oreilly\phpckbk und haben dort die Klasse DateTime definiert. Diese kann also ohne weitere Namensraumangabe instantiiert werden. Durch Angeben des entsprechenden Namensraums können wir genauso einfach …

Der Beitrag PHP 5: Mit Namespaces Kollisionen zwischen Klassennamen verhindern erschien zuerst auf oreillyblog.

CSS-Sprechstunde für Power-User – Attribute: Der Selektor der Zukunft

Nathalie Pelz — Tue, 19 May 2009 10:40:47 +0000

Wenn es um die Gestaltung von Formularen geht, hauen einen Typ-Selektoren nicht unbedingt vom Hocker. Schließlich wird für Textfelder, Radiobuttons, Checkboxen, Passwortfelder und Buttons das gleiche HTML-Tag benutzt: <input>. Eine Breitenangabe von 200 Pixeln mag für ein Textfeld sinnvoll sein, Ihre Checkboxen sollen aber vermutlich nicht ganz so groß ausfallen. Das heißt, Sie können nicht einfach schreiben: input { width: 200px; }. Momentan besteht die verlässlichste Methode darin, Textfelder mit einer eigenen Klasse zu markieren, z.B. <input type=“text“ class=“textfeld“ name=“email“ />. Über den entsprechenden Klassen-Selektor können dann eigene Stilregeln definiert werden. Vermutlich schon bald können Sie allerdings den Attribut-Selektor für diese Aufgabe verwenden, der wesentlich mehr Möglichkeiten bietet. Ein Attribut-Selektor wählt ein HTML-Element anhand seines Attributs aus. Bei <input>-Tags bestimmt der Wert des Attributs type, welche Art von Formularelement tatsächlich erzeugt wird. Für ein Textfeld ist dies beispielsweise der Wert text. Um den Hintergrund für alle einzeiligen Textfelder blau einzufärben, könnten Sie die folgende Regel verwenden: input[type=“text“] { background-color: blue; } Wenn Sie den Attributwert im obigen Beispiel von text in submit ändern, wird stattdessen …

Der Beitrag CSS-Sprechstunde für Power-User – Attribute: Der Selektor der Zukunft erschien zuerst auf oreillyblog.

Häufig gestellte Fragen zu CSS: Hierarchische Untermenüs

Nathalie Pelz — Tue, 28 Apr 2009 13:04:57 +0000

Wie erstelle ich diese coolen Untermenüs, die erscheinen, wenn ich mit der Maus über einen Button fahre? Navigationsleisten mit mehreren Menüebenen, die bei Bedarf herausfahren oder aufklappen, sind äußerst beliebt. Sie bieten eine ideale Möglichkeit, eine Menge Links in eine kompakte Navigationsleiste zu packen. Hierfür gibt es mehrere Herangehensweisen. Zuerst die reine CSS-Lösung. Ein sehr beliebtes Vorgehen für hierarchische Aufklappmenüs heißt »Son of Suckerfish«. (Die Vorgängerversion hieß einfach »Suckerfish«.) Die Details finden Sie unter der Adresse http://www.htmldog.com/articles/suckerfish/. Eine gute (englische) Anleitung für die Erstellung horizontaler Aufklappmenüs mit mehreren Ebenen finden Sie unter der Adresse www.tanfa.co.uk/css/examples/menu/tutorial-h.asp. Auf der gleichen Website befindet sich auch eine Anleitung für die Erstellung vertikaler Menüs mit aufklappbaren Untermenüs: www.tanfa.co.uk/css/examples/menu/tutorial-v.asp. Ein Nachteil der reinen CSS-Lösungen besteht darin, dass die Untermenüs sofort wieder verschwinden, sobald sich der Mauszeiger des Benutzers nicht mehr darüber befindet. Sie können entweder darauf vertrauen, dass alle Ihre Benutzer hervorragende Reflexe haben, oder Sie verwenden einen anderen Ansatz: Benutzen Sie CSS, um die Buttons zu gestalten, und JavaScript, um die Funktionen der Untermenüs zu steuern. Sie finden verschiedene JavaScript-gesteuerte …

Der Beitrag Häufig gestellte Fragen zu CSS: Hierarchische Untermenüs erschien zuerst auf oreillyblog.

Geheime Schleichwege in CSS: Wenn Rahmen aus dem Rahmen fallen

Nathalie Pelz — Wed, 22 Apr 2009 14:30:25 +0000

Wenn sich die Buttons in Ihrer Navigationsleiste berühren und Sie jeden Link mit einem Rahmen versehen, werden zwischen den Links die Begrenzungslinien doppelt dargestellt. Die unteren und oberen Rahmenlinien berühren sich. Das können Sie umgehen, indem Sie nur die untere Rahmenseite weglassen. Auf diese Weise wird zwischen den Links jeweils nur eine Begrenzungslinie angezeigt. Durch diese Methode fehlt jetzt aber die Begrenzungslinie unterhalb des letzten Links. Das können Sie jedoch beheben, indem Sie eine Klasse für die richtigen Rahmeneinstellungen definieren und diese dem letzten Link zuweisen. Noch besser ist es, wenn Sie die untere Rahmenseite einfach für das <ul>-Element definieren, das die Navigationsleiste umgibt. Auszug aus dem neuerschienenen CSS Missing Manual von David Sawyer McFarland.

Der Beitrag Geheime Schleichwege in CSS: Wenn Rahmen aus dem Rahmen fallen erschien zuerst auf oreillyblog.

Häufig gestellte Fragen zu CSS: Listen gut aussehen lassen

Nathalie Pelz — Mon, 06 Apr 2009 14:42:47 +0000

Wann werde ich jemals einen Kind-Selektor benutzen? Ich kenne so viele Selektoren, dass ich im Prinzip auf jedes Seitenelement zugreifen kann. Warum sollte ich also einen weiteren lernen? Allerdings gibt es im Webdesign eine Herausforderung, bei der Kind-Selektoren unschlagbar sind und die auf mehr Websites vorkommt, als Sie denken. Jedes Mal wenn Sie mit verschachtelten, ungeordneten Listen (wie in der Abbildung oben) arbeiten, können Sie Kind-Selektoren verwenden, um diese Kategorien und Unterkategorien visuell voneinander zu unterscheiden. Sie können die erste Ebene der Einträge anders gestalten als die zweite usw. Auf diese Weise präsentierte Inhalte wirken aufgeräumt, professionell und lesbar (und Ihre Besucher werden Sie dafür lieben). Legen Sie hierfür zuerst eine klassenbasierte Stildefinition für die oberste Listenebene an, z.B. mit dem Namen .hauptListe. Für diese Ebene soll eine serifenlose Schrift (sans-serif, z.B. Helvetica oder Arial) verwendet werden, die etwas größer ist als der übrige Text, vielleicht fett oder in einer anderen Farbe. Die folgenden Ebenen erhalten eine kleine Schriftgröße, dafür aber eine Serifenschrift (z.B. Times), um die Lesbarkeit zu erhöhen. Gerade bei viel Text hilft …

Der Beitrag Häufig gestellte Fragen zu CSS: Listen gut aussehen lassen erschien zuerst auf oreillyblog.