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

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

  •  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
  •  2
  •   Jon Smock    15 年前

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

        3
  •  1
  •   Josh Stodola    15 年前

        4
  •  0
  •   g.d.d.c    15 年前

    推荐文章