如何在禁用Javascript的情况下让我的UI"优雅地降级"？

Question

我已经在SO上阅读了多篇文章,如果用户禁用了Javascript,理想情况下,您的页面应该"优雅地降级".我不确定一般来说应该做些什么类型的事情来实现这一目标.

我有一大堆HTML用于配置'计划'.根据选择框的值,将显示不同的字段.

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

更新选择后,我隐藏显示的字段,以便在不合适时不显示"星期几"或"月中的日期"等字段.我不确定如何在没有Javascript的情况下优雅地降低这种性能,因为如上所述,某些字段对于各种计划类型来说完全不合适.

我的问题是:一般来说,如果没有Javascript,我将如何制作禁用/隐藏不适当字段的内容或者某些前/后处理是否会正常降级？

我也对我能看到的可以处理这种退化的特定网站感兴趣吗？

Answer 1

基本思想是你有一个标准(非js)的做事方式,然后你添加JavaScript来覆盖默认行为.

在您的情况下,您有一个select,所以非js行为将是当您选择一个选项时,您提交一个表单,该表单加载显示不同字段的页面的新版本.

您的JavaScript(如果已启用)将隐藏提交按钮并进行就地更新.

思考它的首选方式是渐进增强,并且更容易实现这种方式.使您的页面作为准系统HTML工作,然后使用CSS和JavaScript逐步增强它.然后,如果它会优雅地降级,你永远不必解决.

如果您的JavaScript和CSS在单独的文件而不是内联中,则更容易进行渐进增强.使用像jQuery*这样的Ajax库,您可以使用CSS选择器选择元素,以便为这些元素添加行为.在你的情况下,你会这样做$('#schedule_frequency').change(updateScheduleFields)(我不认为你的id应该有一段时间).

*免责声明:可以在没有库的情况下在JavaScript中选择HTML元素,并且存在除jQuery之外的Ajax库.