Come faccio a fare il mio UI 'degrada con grazia' con Javascript disattivato?

Question

ho letto in più post, in modo che se gli utenti hanno javascript disabilitato, idealmente la pagina dovrebbe 'degrado con grazia'. Non sono sicuro, in generale, quali tipi di cose dovrebbero essere fatte per rendere questo accada.

Ho un blob di HTML per la configurazione di un 'programma'. A seconda del valore di una casella di selezione, vengono mostrati diversi campi.

<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>

Quando il select viene aggiornato, mi nascondo i campi che vengono visualizzati in modo che le cose come 'giorno della settimana' o 'giorni del mese' non vengono visualizzati quando è inappropriato. Io non sono davvero sicuro di come fare questo degrado con garbo senza Javascript, perché, come detto, alcuni dei campi sono solo del tutto inadeguato per i vari tipi di pianificazione.

La mia domanda è: In generale, come faccio a fare qualcosa che i campi disabilita / pelli inappropriati o fa qualche pre / post degrado elaborazione correttamente senza Javascript?

Mi piacerebbe anche essere interessati a siti specifici che ho potuto osservare che gestire questo tipo di degrado bene?

Answer 1

L'idea di base è che si ha uno standard (non-js) modo di fare qualcosa, e poi si aggiunge il supporto JavaScript per ignorare che il comportamento di default.

Nel tuo caso, si ha un select, in modo che il comportamento non-js sarebbe che quando si seleziona l'opzione, si invia un modulo che carica una nuova versione della pagina con diversi campi indicati.

Il tuo JavaScript (se abilitato) per nascondere il pulsante di invio e fare l'aggiornamento sul posto.

Il modo migliore di pensare a questo proposito è progressiva valorizzazione , ed è molto più facile per raggiungere tale viceversa. Fai il tuo lavoro come pagina HTML barebone, poi progressivamente valorizzarlo con i CSS e JavaScript. Allora non hai mai di capire se si degrada con grazia.

E 'più facile da fare progressive enhancement se il vostro JavaScript e CSS sono in file separati piuttosto che in linea. Con una libreria Ajax come jQuery *, è possibile selezionare elementi con selettori CSS in modo da aggiungere un comportamento a quegli elementi. Nel tuo caso, si farebbe $('#schedule_frequency').change(updateScheduleFields) (non credo che si dovrebbe avere un periodo nel vostro id).

* Disclaimer:. E 'possibile selezionare gli elementi HTML in JavaScript, senza una biblioteca e Ajax biblioteche diverso jQuery esistono

Answer 2

Quando si pensa a siti degradanti con grazia, pensare a come si può usare il sito senza alcun javascript. Quindi utilizzare javascript e l'onload / gancio pronto ad elementi di cambiamento del vostro sito in ciò che si voleva in origine con javascript. In questo modo, se javascript è disattivata, il sito funziona. Se è abilitata, l'impostazione JavaScript verrà eseguito e trasformare la pagina.

Di solito Questo significa avere un extra pulsante "Invia" che i vostri pelli javascript di impostazione o qualcosa di simile.

Answer 3

Quello che vorrei fare in questo caso è avere un pulsante "Avanti" sotto l'elenco a discesa che i posti la selezione per il server. Allora si avrebbe bisogno logica server-side per vedere / nascondere i campi. Io di solito avrei farlo funzionare in questo modo prima, e poi tornare indietro e aggiungere un tocco Javascript per nascondere il pulsante e prevenire l'andata e ritorno.

Answer 4

Credo che la risposta breve è che non farà quei tipi di cose. Runtime modifica alla pagina visualizzata è ottenuta tramite JavaScript -. Quando questo è disattivato non si arriva a utilizzare questo tipo di effetti

Inoltre, non farà elaborazione pre-post senza JavaScript. Avrai bisogno di implementare il vostro controllo / collaudo nel back-end.