Wie mache ich meine UI ‚degradiert graziös‘ mit Javascript deaktiviert?

Question

Ich habe in mehrere Beiträge auf SO gelesen, dass, wenn die Benutzer haben Javascript deaktiviert, idealerweise Ihre Seite sollte ‚degradieren anmutig‘. Ich bin sicher, dass in der Regel nicht, welche Arten von Dingen sollen, damit dies geschieht erfolgen.

Ich habe einen Klecks HTML für die Konfiguration eines ‚Zeitplan‘. Je nach dem Wert eines Auswahlfeldes werden verschiedene Felder angezeigt.

<select name="schedule.frequency"
    id="schedule.frequency" 
    onChange='updateScheduleFields()' >
        <option value="Manual">Run Manually</option>
        <option value="Monthly">Monthly</option>
        <option value="Weekly">Weekly</option>
        <option value="Daily">Daily</option>
        <option value="Hourly">Hourly</option>
</select>

Wenn die Auswahl aktualisiert wird, blende ich die Felder, die angezeigt werden, so dass Dinge wie ‚Tag der Woche‘ oder ‚Tage des Monats‘ werden nicht angezeigt, wenn es nicht angebracht ist. Ich bin mir nicht wirklich sicher, wie diesen Verschlechterungs anmutig ohne Javascript zu machen, denn wie gesagt, einige der Felder sind nur völlig ungeeignet für verschiedene Plantypen.

Meine Frage lautet: In der Regel, wie würde ich etwas, das deaktiviert / versteckt unangemessene Felder oder hat einige Pre / Post-Processing degradiert richtig ohne Javascript zu machen?

Ich würde auch in spezifischen Stellen interessiert sein, dass ich auch an diesem Griff diese Art von Abbau aussehen könnte?

Answer 1

Die Grundidee ist, dass Sie ein normales (nicht-js) Art und Weise etwas zu tun, und Sie JavaScript dann fügen Sie dieses Standardverhalten außer Kraft zu setzen.

In Ihrem Fall haben Sie ein select, so dass das nicht-js Verhalten wäre, dass, wenn Sie eine Option auswählen, können Sie eine Form vorlegen, lädt eine neue Version der Seite mit verschiedenen Bereichen gezeigt.

Ihr JavaScript (wenn aktiviert) wird die Submit-Button verstecken und die Aktualisierung an Ort und Stelle tun.

Die bevorzugte Art des Denkens über sie progressive Verbesserung ist, und es ist viel einfacher zu erreichen, dass andersherum. Machen Sie Ihre Seite Arbeit als Barebone-HTML, dann erhöhen sie progressiv mit CSS und JavaScript. Dann sind Sie nie aus arbeiten, wenn es ordnungsgemäß beeinträchtigen wird.

Es ist einfacher, progressive Erweiterung zu tun, wenn sie JavaScript und CSS sind in separaten Dateien statt Inline. Mit einer Ajax-Bibliothek wie jQuery * können Sie Elemente mit CSS-Selektoren wählen, um Verhalten zu diesen Elementen hinzuzufügen. In Ihrem Fall, Sie würden $('#schedule_frequency').change(updateScheduleFields) tun (ich glaube nicht, dass Sie eine Zeit in Ihrer ID haben sollen).

* Haftungsausschluss:. Es ist möglich, HTML-Elemente in JavaScript ohne eine Bibliothek auszuwählen und Ajax Bibliotheken andere als jQuery exist

Answer 2

Wenn Sie über Websites denken abbau anmutig, darüber nachzudenken, wie Sie die Website ohne Javascript verwenden würde. Dann Javascript verwenden und die onload / bereit Haken zu ändern Elemente Ihrer Website in das, was Sie ursprünglich mit Javascript wollte. Auf diese Weise, wenn Javascript deaktiviert ist, funktioniert die Seite. Wenn es aktiviert ist, wird das Setup Javascript ausführen und die Seite zu transformieren.

In der Regel bedeutet dies eine zusätzliche Schaltfläche „Senden“, dass Ihr Setup Javascript versteckt oder so ähnlich ist.

Answer 3

Was ich in diesem Fall tun würde, ist eine Schaltfläche „Weiter“ unter der Dropdown-Liste, die Beiträge die Auswahl an den Server. Dann würden Sie serverseitige Logik zu zeigen brauchen / verstecken die Felder. Ich normalerweise bekommen würde es auf diese Weise arbeiten zuerst, und dann gehen Sie zurück und fügen Sie Javascript Flair auf den Button zu verstecken und die Hin- und Rückfahrt verhindern.

Answer 4

ich glaube, die kurze Antwort ist, dass Sie nicht diese Art von Dingen tun. Laufzeit Modifikation auf die gerenderte Seite wird über JavaScript erreicht -., Wenn sie deaktiviert ist, Sie erhalten nicht jene Arten von Effekten verwenden

Darüber hinaus werden Sie nicht ohne JavaScript tun Pre-Nachbearbeitung werden. Sie müssen Ihre Prüfung / Prüfung im Backend implementieren.