Comment puis-je faire mon interface « mode dégradé » avec Javascript est désactivé?

Question

Je l'ai lu dans plusieurs messages sur SO que si les utilisateurs ont désactivé les scripts JavaScript, idéalement votre page doit « grâce degrade ». Je ne sais pas en général ce genre de choses doit être fait pour que cela se produise.

J'ai un blob de HTML pour la configuration d'un « calendrier ». En fonction de la valeur d'une zone de sélection, différents champs sont affichés.

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

Lorsque la sélection est mis à jour, je me cache les champs qui sont affichés de sorte que des choses comme « jour de la semaine » ou «jours du mois ne sont pas représentés quand il est inapproprié. Je ne suis pas sûr de savoir comment faire de cette élégance sans Javascript dégrader, car comme indiqué, certains champs sont tout à fait inapproprié pour différents types de planification.

Ma question est: En général, comment pourrais-je faire quelque chose qui désactivent / cache champs inappropriés ou fait un peu de traitement pré / post degrade correctement sans Javascript?

Je serais également intéressé par des sites spécifiques que je pouvais regarder que traiter ce type de dégradation bien?

Answer 1

L'idée de base est que vous avez un moyen standard (non-js) de faire quelque chose, et puis vous ajoutez JavaScript afin de remplacer ce comportement par défaut.

Dans votre cas, vous avez un select, de sorte que le comportement non-js serait que lorsque vous sélectionnez une option, vous soumettez un formulaire qui charge une nouvelle version de la page avec les différents champs indiqués.

Votre JavaScript (si activé) cachera le bouton Soumettre et faire la mise à jour en place.

La meilleure façon de penser à ce sujet est l'amélioration progressive , et il est beaucoup plus facile à réaliser que inverse. Faites travailler votre page HTML barebones, puis améliorer progressivement avec CSS et JavaScript. Ensuite, vous ne devez jamais travailler si elle va se dégrader avec grâce.

Il est plus facile de faire l'amélioration progressive si votre JavaScript et CSS sont dans des fichiers séparés plutôt que inline. Avec une bibliothèque Ajax comme jQuery *, vous pouvez sélectionner des éléments avec sélecteurs CSS afin d'ajouter un comportement à ces éléments. Dans votre cas, vous feriez $('#schedule_frequency').change(updateScheduleFields) (je ne pense pas que vous devriez avoir une période dans votre id).

* Avertissement:. Il est possible de sélectionner des éléments HTML dans JavaScript sans une bibliothèque, et Ajax bibliothèques autres que exist jQuery

Answer 2

Quand vous pensez à des sites dégradantes grâce, pensez à la façon dont vous utilisez le site sans javascript. Ensuite, utilisez javascript et le crochet onload / prêt à des éléments de changement de votre site dans ce que vous vouliez à l'origine avec javascript. De cette façon, si javascript est désactivé, le site fonctionne. Si elle est activée, le javascript de configuration fonctionnera et transformer la page.

En général, cela signifie avoir un supplément bouton « Envoyer » que votre javascript configuration ou cache quelque chose comme ça.

Answer 3

Qu'est-ce que je ferais dans ce cas est un bouton « Suivant » ci-dessous la liste déroulante qui affiche la sélection au serveur. Ensuite, vous besoin d'une logique côté serveur pour afficher / masquer les champs. Je habituellement le faire fonctionner de cette façon d'abord, puis revenir en arrière et ajouter une touche Javascript pour cacher le bouton et empêcher l'aller-retour.

Answer 4

Je crois que la réponse courte est que vous ne serez pas en train de faire ce genre de choses. modification d'exécution à la page rendu est réalisée via JavaScript -. lorsqu'il est désactivé, vous ne recevez pas d'utiliser ces types d'effets

De plus, vous ne serez pas en train de faire le traitement pré-post sans JavaScript. Vous aurez besoin de mettre en œuvre votre contrôle / test à la fin de retour.