代码之家 › 专栏 › 技术社区 › Shawn D.

如何在禁用Javascript的情况下使UI“优雅地降级”?

graceful-degradation javascript

4

Shawn D. · 技术社区 · 15 年前

我有一个用于配置“时间表”的HTML blob。根据选择框的值,会显示不同的字段。

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

更新select时,我会隐藏显示的字段,以便在不合适的时候不显示“星期几”或“月日”之类的内容。我真的不知道如何在没有Javascript的情况下优雅地降级,因为如上所述,有些字段完全不适合各种计划类型。

我的问题是: 一般来说,如果不使用Javascript,我将如何使禁用/隐藏不适当的字段或某些预处理/后处理正确降级?

我也有兴趣在特定的网站,我可以看看,处理这种类型的退化很好?

4 回复 | 直到 15 年前

1

14

Skilldrick 15 年前

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

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

最好的思考方式是 progressive enhancement ,这样更容易实现。让你的页面像赤裸裸的HTML一样工作,然后用CSS和JavaScript逐步增强它。那你就永远不必知道它是否会优雅地退化。

$('#schedule_frequency').change(updateScheduleFields) (我不认为你的身份证上应该有句号)。

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

2

Jon Smock 15 年前

通常这意味着有一个额外的“提交”按钮,你的安装javascript隐藏或类似的东西。

3

1

Josh Stodola 15 年前

4

0

g.d.d.c 15 年前