Irgendwelche Ideen auf, wie man edit-in-place abbaubar?

Question

ich zur Zeit schreibe eine edit-in-place-Skript für MooTools und ich bin ein wenig ratlos, wie ich kann es anmutig ohne JavaScript machen degradieren, während immer noch eine gewisse Funktionalität. Ich möchte in irgendeiner Weise progressive Erweiterung verwenden. Ich bin nicht auf der Suche nach Code, sondern eher ein Konzept, wie man die Situation nähern würde. Wenn Sie irgendwelche Ideen haben oder wissen, dass edit-in-place-Skripte, die ordnungsgemäß beeinträchtigen, bitte teilen.

Answer 1

Es klingt wie Sie dies aus der falschen Richtung nähern könnten. Anstatt die edit-in-place zu schaffen und es schön (die Graceful Degradation Winkel) abbauen bekommen, sollten Sie wirklich eine nicht-Javascript-Version für die Bearbeitung werden das Erstellen und dann das edit-in-place Javascript nach dem Laden der Seite mit, reffered zu wie Progressive Enhancement .

Es gibt zwei Möglichkeiten. Erstellen Sie die Anzeige als eine Form mit einem Submit-Button, der ohne Javascript funktioniert, dann mit Javascript die Eingänge mit irgendeiner Art von Etikett ersetzen, die die edit-in-place führt. Sie sollten eine Kombination von Etiketten verwenden können und id-Attribute, die richtigen Eigenschaften für die Edit-in-Place-Implementierung herausgreifen zu arbeiten. Die andere Option, wenn Sie nicht ein Formular standardmäßig angezeigt werden sollen, die Werte mit einem Button / Link angezeigt werden, um es in eine Form mit serverseitige Verarbeitung drehen, dann das Bearbeiten-in-palce darauf.

Answer 2

Sie können nicht tun edit-in-place überhaupt ohne JavaScript, so Graceful Degradation dafür, sicherzustellen, bestehen darin, dass der Benutzer kann immer noch das Element in Frage bearbeiten, wenn JavaScript nicht verfügbar ist.

Als solches würde ich nur einen Link haben den gesamten Artikel in Frage zu bearbeiten und erstellen dann die Edit-in-Place-Steuerelemente in JavaScript auf Seite laden, versteckt auf den Link Bearbeiten, wenn Sie lieber als Benutzer verwenden Editier- in-place, wenn verfügbar.

Answer 3

Wenn es Textinhalt ist, können Sie die editierbaren Inhalt als Eingabetyp Taste einreichen konnten zeigen, mit wie der Inhalt Beschriftung. Wenn Sie darauf klicken, wäre es das gesamte Formular abgesendet hat, die anderen Werte zu bewahren, und zeigt einen Bearbeitungsdialog. Danach wird die Formularwerte wieder hergestellt werden können.

Answer 4

setzen Vielleicht eine Eingabe in einem div unter jedem Element, das bearbeitet-in-Platz hat. Wenn die Seite geladen wird, verwenden Sie Javascript diese divs zu verstecken. Auf diese Weise werden sie nur genutzt werden, wenn die Javascript nie ausgelöst.

Answer 5

Ich bin asuming was Sie versuchen, so etwas wie das folgende Szenario zu tun ist:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Wenn die eine Schaltfläche, die den ersetzt mit einem , so dass es bearbeitet werden kann. Es gibt ein paar Möglichkeiten, anmutig diese degradieren zu machen (dh Arbeit ohne Javascript).

In der Theorie:

Mit CSS, tun Sie es mit psuedo-Selektoren. :. Aktiv etwas wie ein Onclick-Ereignis ist, also wenn Sie nisten sich versteckt im

, diese CSS versteckt die und zeigt die , wenn das li auf geklickt

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

Dies kann in Ihrem Lieblings-Browser arbeiten, aber Sie werden ohne Zweifel feststellen, dass es in IE bricht.

In der Praxis:

Verwenden Sie einen Link. Haben, dass eine tatsächliche Verbindung sein, die zu einer Seite geht, wo diese Eingabe / span Substitution Serverseite durchgeführt wurde. Sie halten einen Event-Handler auf dem die MooTools nutzt das Click-Ereignis für die Menschen zu annullieren, die JS haben, wie folgt aus:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

Versuchen Sie, einen Stil Eingabe von Text verwendet wird, und nach der Seite geladen es nur lesbar machen, die Nur-Lese-Attribut. und wenn Sie darauf klicken Sie auf das Read-only-Attribut entfernen, und onblur es nur lesbar wieder machen. wenn Sie auf die Schaltfläche „Speichern“ oder auf onblur Ereignis eine Ajax-Anfrage machen die Daten auf dem Server zu speichern.