Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Erstellen Sie ein direktes Bearbeitungssystem

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Das Klicken von mehreren Seiten durch mehrere Seiten, nur um ein Feld zu bearbeiten, ist 1999. In diesem Lernprogramm erfahren Sie, wie Sie ein direktes Bearbeitungssystem erstellen, wie es auf beliebten Websites wie Flickr zu finden ist.


Ein Wort vom Autor

Bei all dem Rummel um Web 2.0 ist die Benutzerfreundlichkeit heute viel wichtiger als je zuvor. Die Möglichkeit, Inhalte zu bearbeiten, ohne auf eine andere Seite wechseln zu müssen, ist etwas, nach dem sich viele Benutzer wirklich sehnen. Viele große Namen verwenden dieses Muster bereits mit großer Wirkung. Wenn Sie Flickr verwendet haben, haben Sie dies wahrscheinlich in Aktion gesehen.

Ich glaube, eine Demo sagt mehr als tausend Worte. Schlagen Sie die Demo an und probieren Sie es selbst aus.

Heute werden wir uns ansehen, wie dies mit unserer bevorzugten JavaScript-Bibliothek, jQuery, implementiert werden kann. Interessiert? Fangen wir gleich an!

Designziele

Bevor wir uns mit der Implementierung der Funktionalität befassen, finden Sie hier einige Gedanken zu den Zielen und den daraus resultierenden Entscheidungen.

  • Wir müssen den Benutzer den Inhalt bearbeiten lassen, ohne die Seite zu verlassen. Das ist eine Selbstverständlichkeit.
  • Das sollte entweder als Ganzes funktionieren oder als Ganzes fehlschlagen. Wenn JS deaktiviert ist, möchten wir nicht auf seltsame Macken stoßen.
  • Der Benutzer sollte wissen, dass der Inhalt bearbeitet werden kann. Eine subtile Änderung des blauen Hintergrunds sollte den Benutzer darauf aufmerksam machen.
  • Beim Auslösen der Bearbeitung gibt es einige Optionen. Wir können den Benutzer entweder mit einem normalen Klick oder mit einem Doppelklickbearbeiten lassen. Ich habe Doppelklick gewählt, da zufällige Doppelklicks weniger häufig auftreten als zufällige Klicks. Das Umschalten ist nur eine Frage des Änderns des Parameters im Bindungsereignis.
  • Eine Möglichkeit für den Benutzer, die Änderungen zu speichern oder zu verwerfen.
  • Das Speichern oder Bearbeiten von Ereignissen kann auf zwei Arten ausgelöst werden. Tastaturereignisse oder Mausereignisse. Ich habe Mausereignisse gewählt, da Tastaturereignisse nicht spezifisch sind.
  • In Bezug auf Mausereignisse können Sie entweder herkömmliche Schaltflächen oder übliche Links verwenden. Ich habe Links ohne besonderen Grund ausgewählt.
  • Der Benutzer sollte in der Lage sein, die Bearbeitung fortzusetzen, auch wenn er außerhalb des Eingabefelds klickt oder die Seite verlässt und zurückkommt.
  • Außerdem sollte der Benutzer in der Lage sein, so viele Felder wie möglich gleichzeitig zu bearbeiten.

Nachdem wir unsere Bedürfnisse festgelegt haben, können wir nun fortfahren, wie wir dies tun werden.

Aktionsplan

Wir müssen jetzt herausfinden, was in einer bestimmten Reihenfolge zu tun ist.

Schritt 1: Wir müssen jedem Element, das diese Funktionalität benötigt, eine bearbeitbare Klasse hinzufügen.

Schritt 2: Als nächstes müssen wir jedem bearbeitbaren Element Hover hinzufügen, um darauf aufmerksam zu machen, dass der Inhalt dieses Elements bearbeitet werden kann. Wir werden die Hover mit JavaScript anstelle von CSS hinzufügen und entfernen. Dies geschieht hauptsächlich für Geräte oder Browser mit deaktiviertem JavaScript. Wir wollen ihnen keine falschen visuellen Hinweise senden.

Schritt 3: Wenn Sie auf ein bearbeitbares Element doppelklicken, müssen Sie den Inhalt austauschen und durch ein Textfeld mit dem alten Text ersetzen.

Schritt 4a: Wenn der Benutzer die Änderungen speichern möchte, kopieren Sie den Wert der Eingabe in das übergeordnete Element und entfernen Sie das Eingabefeld.

Schritt 4b: Wenn der Benutzer die Änderungen verwerfen möchte, ersetzen Sie den alten Inhalt und entfernen Sie das Eingabefeld.

Das sind die grundlegenden Schritte zum Erstellen dieser Funktionalität. Natürlich gibt es noch einige andere kleine Dinge, aber ich werde sie im weiteren Verlauf erklären.

Core Markup

Das HTML-Markup der Demoseite sieht so aus.

Wie Sie sehen, haben wir ohne Berücksichtigung der Kesselplatte zwei ungeordnete Listen. Jedes li-Element verfügt über eine bearbeitbare Klasse, die angibt, dass sein Inhalt bearbeitet werden kann.

Wir haben auch die jQuery-Bibliothek und unsere eigene Skriptdatei hinzugefügt.

CSS-Styling

Hier ist nichts Besonderes. Nur eine Menge Code für Layout- und Stylingzwecke.

Beachten Sie insbesondere die Klassen editHover und noPad. Wir werden sie in Kürze verwenden.

JavaScript-Implementierung

Nachdem wir ein solides Framework und einige grundlegende Stile haben, können wir mit dem Codieren der erforderlichen Funktionen beginnen. Beachten Sie, dass wir jQuery in großem Umfang nutzen. Insbesondere benötigen wir mindestens Version 1.3 oder höher. Alles andere und es wird nicht funktionieren.

Schwebeflug hinzufügen

HoversHoversHovers

Wie bereits erwähnt, müssen wir bearbeitbaren Objekten einen subtilen blauen Hintergrund hinzufügen, um anzuzeigen, dass sie bearbeitet werden können. Wir haben bereits die editHover-Klasse erstellt, um dies zu gewährleisten.

Dieser winzige Ausschnitt erledigt das für uns. Wir verwenden die hover-Methode von jQuery, um die editHover-Klasse hinzuzufügen, wenn sich das Element auf dem Element befindet, und sie zu entfernen, wenn dies nicht der Fall ist. Wir verwenden dies, um auf das spezifische Element zu verweisen, über dem sich der Mauszeiger befindet. Wenn wir stattdessen .editable als Selektor verwendet hätten, würde jedem Element die Klasse hinzugefügt. Wir verwenden dies also, um nur auf das Element abzuzielen, das wir benötigen.

Elemente ausschalten

Zunächst müssen wir sicherstellen, dass unser Code ausgeführt wird, wenn auf das Zielelement doppelklickt wird. Also schließen wir zuerst den Handler für dieses Ereignis an.

Wir fügen die Funktion replaceHTML dem Doppelklickereignis relativ zum bearbeitbaren Element mit diesem einen Liner hinzu. Jetzt können wir mit dem Ausschalten der Elemente fortfahren.

Lassen Sie uns unseren Code Stück für Stück durchgehen.

Ich definiere die Funktionalität innerhalb einer separaten benannten Funktion anstelle einer anonymen Funktion aus einem bestimmten Grund: Ich werde diese Funktion mehr als einmal verwenden. Als Nächstes speichern wir den Inhalt des Elements für die zukünftige Verwendung mithilfe der html-Methode von jQuery und ersetzen alle Anführungszeichen, da dies unsere Ausgabe auf der ganzen Linie durcheinander bringt.

Nachdem unser Inhalt für die spätere Verwendung sicher gespeichert wurde, können wir die Elemente austauschen. Zuerst leeren wir das li-Element aus, indem wir eine leere Zeichenfolge an die html-Methode senden. Als nächstes fügen wir Standard-HTML für ein Eingabefeld ein. Wir fügen einige Klassen für Stylingzwecke hinzu. Noch wichtiger ist, dass wir das value-Attribut auf den Originaltext setzen, der in dem in oldText gespeicherten Element enthalten ist. Wir fügen auch einige Links hinzu, um das Speichern und Verwerfen der Änderungen zu gewährleisten. Wir haben ihnen auch Klassen hinzugefügt, damit sie einfach und für das Styling ausgewählt werden können.

Wie immer verwenden wir dies, um auf das Element abzuzielen, das das Ereignis ausgelöst hat.

Änderungen beibehalten

Edited TextEdited TextEdited Text

Lassen Sie mich zunächst die live-Methode von jQuery vorstellen. Sie haben wahrscheinlich noch nicht so viel gesehen, deshalb werde ich eine kurze Einführung geben.

Sie können Handler nicht mit Ereignissen verbinden, die von Elementen ausgelöst werden, die beim Laden der Seite und des JavaScript nicht einmal im DOM vorhanden waren. Wenn Sie normale Ereignisbindungsfunktionen verwenden, schlägt dies aus dem oben genannten Grund fehl. Dafür sorgt die live-Methode.

Es bindet Handler an Ereignisse, unabhängig davon, wann das Element erstellt wurde. Weitere Informationen hierzu finden Sie in den offiziellen Dokumenten.

Schauen wir uns jetzt unseren Code an. Wir binden zuerst den in unserer anonymen Funktion enthaltenen Code an das Klickereignis. Innerhalb der Funktion speichern wir zuerst den im Eingabefeld enthaltenen Text. Dies kann etwas schwierig sein, da das Eingabefeld keine ID hat. Also suchen wir zuerst nach dem Formularelement, das zufällig sein Geschwister ist, und durchlaufen dann das Eingabeelement. Wir kopieren dann seinen Wert, nachdem wir alle darin enthaltenen Anführungszeichen ersetzt haben.

Als nächstes erhalten wir das übergeordnete Element links, das Element li, und ersetzen seinen HTML-Inhalt durch den Text, den wir im vorherigen Schritt kopiert haben.

Dieser Block hätte leicht als Einzeiler erstellt werden können, aber ich habe ihn aus Gründen der Lesbarkeit in zwei Zeilen aufgeteilt.

Verwerfen der Änderungen

Das ist genauso einfach wie es aussieht. Da der Benutzer keine der Änderungen behalten möchte. Wir ersetzen einfach den HTML-Inhalt des übergeordneten Elements durch den Originaltext, den wir zuvor in die Variable oldText kopiert hatten.

Damit ist der Kern unserer Arbeit erledigt. Wir müssen nur ein paar Änderungen vornehmen, um sicherzustellen, dass die Dinge nicht kaputt gehen, wenn der Benutzer unerwartete Dinge tut.

Binden und Entbinden

Wenn Sie unseren Code zu diesem Zeitpunkt getestet haben, tritt wahrscheinlich der Fehler auf, der die Funktionalität beeinträchtigt: Wenn ein Benutzer in das resultierende Eingabefeld doppelklickt, wird er jetzt mit dem HTML-Inhalt des Bearbeitungssystems gefüllt. Versuch es selber. Bei jedem Doppelklick wird der Wert des Eingabefelds durch Hinzufügen eines weiteren Textbündels angezeigt. Dieses Problem wird wahrscheinlich viel schlimmer sein, wenn Sie click als Auslöseereignis ausgewählt haben.

Um dies zu korrigieren, müssen wir den Ereignishandler nur für dieses bestimmte Element aufheben und erneut binden, sobald der Benutzer auf Speichern oder Verwerfen klickt. Lassen Sie uns das jetzt implementieren.

Unsere vorherigen Codeblöcke müssen jetzt so bearbeitet werden:

Wir haben den Handler für das Element ausgehängt, das das Ereignis ausgelöst hat. Bei den übrigen Elementen mit der bearbeitbaren Klasse sind die Handler noch intakt und sie reagieren auf Ereignisse.

Als Nächstes hängen wir diese Handler wieder an, obwohl der Benutzer sie bearbeiten möchte oder nicht. Wenn wir diese nicht erneut anhängen, können die Felder nur einmal bearbeitet werden. Beim zweiten Doppelklick werden die Handler nicht mehr an die Ereignisse angehängt. Wir korrigieren dies, indem wir die Handler wieder an die Ereignisse anschließen.

Ein paar Verbesserungen

Dieses letzte Stück Code dient lediglich dazu, das Erscheinungsbild unseres Effekts aufzuwerten. Wenn Sie bemerkt haben, hat das li ein wenig Polsterung, damit der Text darin besser aussieht. Wenn der Text jedoch entfernt und durch ein Textfeld ersetzt wird, sieht das Ergebnis hässlich aus und unterbricht den Effekt. Wir möchten, dass das Textfeld genau den Platz einnimmt, den der ursprüngliche Text belegt hat. In diesem Sinne fügen wir dem Element eine noPad-Klasse hinzu, wenn es doppelt angeklickt und wieder entfernt wurde, wenn der Benutzer die Bearbeitung speichert oder verwirft.

Wir haben den Handler für das Element ausgehängt, das das Ereignis ausgelöst hat. Bei den übrigen Elementen mit der bearbeitbaren Klasse sind die Handler noch intakt und sie reagieren auf Ereignisse.

Der vollständige Code

So sieht der vollständige Code aus:

Nicht schlecht. Fünfzig ungerade Zeilen, um einige schicke neue Funktionen hinzuzufügen.

Noch einen Schritt weiter: Das Backend

Um es nicht zu lang zu machen, habe ich mich darauf beschränkt, die clientseitige Funktionalität allein zu erstellen. Wenn Sie diese Funktionalität in Ihren eigenen Projekten implementieren möchten, wird implizit davon ausgegangen, dass Sie ein Back-End-System zum Speichern dieser Änderungen benötigen. Noch wichtiger ist, dass Sie eine AJAX-Anforderung benötigen, um diesen Aufruf asynchron auszuführen.

Das Hinzufügen dieser Funktionalität sollte ein Kinderspiel sein, aber notieren Sie sich dies. Der obige Code wurde nur zur Veranschaulichung dieses Musters und nicht für die Produktion erstellt. Daher habe ich darauf verzichtet, Elementen zusätzliche IDs-Attribute und Textfeldern Namensattribute hinzuzufügen. Fügen Sie in Ihrem Produktionscode alle hinzu, damit das Namensattribut des Textfelds sinnvoll festgelegt werden kann und das Back-End erkennt, welche Daten aktualisiert werden müssen.

Um eine AJAX-Anfrage hinzuzufügen, müsste unser Save-Handler folgendermaßen aktualisiert werden:

Denken Sie daran, dass das Back-End einige zusätzliche Daten zusammen mit dem aktualisierten Text benötigt, damit die App weiß, welche Daten bearbeitet werden müssen, damit das Back-End einen Sinn ergibt. Sie können bei Bedarf problemlos mehr als ein Datenelement an das Skript senden.

Abschluss

Und da hast du es; So fügen Sie Ihren Projekten eine benutzerfreundliche Funktionalität hinzu. Hoffentlich haben Sie dieses Tutorial interessant gefunden und es hat Ihnen geholfen. Sie können diesen Code auch an anderer Stelle in Ihren Projekten wiederverwenden und hier einschalten, wenn Sie auf Schwierigkeiten stoßen.

Fragen? Schöne Dinge zu sagen? Kritik? Klicken Sie auf den Kommentarbereich und hinterlassen Sie mir einen Kommentar. Viel Spaß beim Codieren!

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.