4

我已经阅读了关于 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>

When the select is updated, I hide the fields that are shown so that things like 'day of the week' or 'days of the month' aren't shown when it's inappropriate. 我不确定如何在没有 Javascript 的情况下优雅地降级，因为如前所述，某些字段完全不适合各种计划类型。

我的问题是：一般来说，我将如何制作禁用/隐藏不适当字段的东西，或者在没有 Javascript 的情况下，某些前/后处理是否会正确降级？

我也对可以很好地处理这种退化的特定站点感兴趣？

4

4 回答 4

14

基本思想是您有一种标准（非 js）的做事方式，然后添加 JavaScript 以覆盖该默认行为。

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

您的 JavaScript（如果启用）将隐藏提交按钮并就地进行更新。

考虑它的首选方式是渐进增强，并且更容易实现这种方式。让您的页面像准系统 HTML 一样工作，然后使用 CSS 和 JavaScript 逐步增强它。然后，您永远不必计算它是否会优雅地降级。

如果您的 JavaScript 和 CSS 在单独的文件中而不是内联文件中，则进行渐进式增强会更容易。使用 jQuery* 之类的 Ajax 库，您可以使用 CSS 选择器选择元素，以便为这些元素添加行为。在您的情况下，您会这样做$('#schedule_frequency').change(updateScheduleFields)（我认为您的身份证中不应该有句号）。

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

于 2010-08-21T14:09:17.673 回答
2

当您考虑网站优雅地降级时，请考虑如何在没有任何 javascript 的情况下使用该网站。然后使用 javascript 和 onload/ready 挂钩将您网站的元素更改为您最初想要的 javascript。这样，如果禁用了 javascript，则该站点可以正常工作。如果启用，设置 javascript 将运行并转换页面。

通常这意味着有一个额外的“提交”按钮，您的设置 javascript 隐藏或类似的东西。

于 2010-08-21T14:10:16.533 回答
1

在这种情况下，我要做的是在下拉列表下方有一个“下一步”按钮，将选择发布到服务器。然后，您将需要服务器端逻辑来显示/隐藏字段。我通常会先让它以这种方式工作，然后返回并添加 Javascript 功能以隐藏按钮并防止往返。

于 2010-08-21T14:20:25.447 回答
0

我相信简短的回答是你不会做那些类型的事情。对渲染页面的运行时修改是通过 JavaScript 实现的 - 当它被禁用时，您将无法使用这些效果。

此外，您不会在没有 JavaScript 的情况下进行预处理。您需要在后端实施检查/测试。

于 2010-08-21T14:10:46.727 回答