¿Cómo hago que mi interfaz de usuario 'se degrada con gracia' con JavaScript desactivado?

Question

He leído en varios puestos en modo que si los usuarios han deshabilitado Javascript, lo ideal es que su página debe 'funcionar fácilmente a'. No estoy seguro, en general, qué tipo de cosas se deben hacer para que esto suceda.

Tengo una gota de HTML para la configuración de un 'cronograma'. Dependiendo del valor de un cuadro de selección, se muestran diferentes campos.

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

Cuando se actualiza el selecto, puedo ocultar los campos que se muestran de modo que las cosas como 'día de la semana' o 'días del mes' no se muestran cuando es apropiado. No estoy muy seguro de cómo hacer esto fácilmente a un nivel sin Javascript, ya que como se ha dicho, algunos de los campos son sólo completamente inadecuado para diversos tipos de programación.

Mi pregunta es: En general, ¿cómo voy a hacer algo que deshabilita los campos / cueros inapropiados o hace algo de pre / post-procesamiento degrade correctamente sin Javascript?

Me también esté interesado en sitios específicos que yo pude ver que manejar este tipo de degradación así?

Answer 1

La idea básica es que usted tiene un estándar (no-js) manera de hacer algo, y luego añadir JavaScript para anular ese comportamiento por defecto.

En su caso, usted tiene un select, por lo que el comportamiento no-js sería que cuando se selecciona una opción, se envía un formulario que carga una nueva versión de la página con los diferentes campos que se muestran.

Su JavaScript (si está activado), se oculta el botón de enviar y hacer la actualización en el lugar.

La mejor forma de pensar en ello es mejora progresiva , y es mucho más fácil de lograr que reves. Hacer su trabajo como página HTML barebones, a continuación, aumentar progresivamente con CSS y JavaScript. Entonces nunca tiene que trabajar a cabo si se degrada con gracia.

Es más fácil hacer una mejora progresiva si su JavaScript y CSS están en archivos separados en lugar de en línea. Con una librería Ajax como jQuery *, puede seleccionar los elementos con los selectores CSS con el fin de añadir el comportamiento de esos elementos. En su caso, haría $('#schedule_frequency').change(updateScheduleFields) (no creo que usted debe tener un período en su id).

* Nota:. Es posible seleccionar elementos HTML en JavaScript sin biblioteca, bibliotecas y Ajax aparte de existir jQuery

Answer 2

Cuando se piensa en los sitios que degradan con gracia, piense en cómo se usaría el sitio sin ningún JavaScript. A continuación, utilice javascript y el proceso de carga / gancho listo para elementos de cambio de su sitio en lo que originalmente quería con javascript. De esta manera, si javascript está deshabilitado, el sitio funciona. Si está habilitado, el código JavaScript de instalación se ejecutará y transformar la página.

Por lo general, esto significa tener un extra botón "enviar" que sus pieles javascript configuración o algo por el estilo.

Answer 3

Lo que quiero hacer en este caso es tener un botón "Siguiente" debajo de la lista desplegable que los puestos de la selección en el servidor. Entonces tendría lógica del lado del servidor para mostrar / ocultar los campos. Por lo general iba a conseguir que funcione de esta manera en primer lugar, y luego volver atrás y añadir un toque Javascript para ocultar el botón e impedir que el de ida y vuelta.

Answer 4

Creo que la respuesta corta es que no se va a hacer ese tipo de cosas. la modificación en tiempo de ejecución a la página representada se logra a través de JavaScript -. cuando está desactivada no se llega a utilizar ese tipo de efectos

Además, no va a hacer el procesamiento de pre-post sin JavaScript. Tendrá que poner en práctica su cuenta de cheques / pruebas en el extremo posterior.