如何让我的 UI “优雅降级”？禁用 JavaScript？
我在 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的情况下某些前/后处理是否正确降级？
我还对可以很好地处理此类退化的特定网站感兴趣？
I've read in multiple posts on SO that if users have Javascript disabled, ideally your page should 'degrade gracefully'. I'm not sure in general what types of things should be done to make this happen.
I have a blob of HTML for configuring a 'schedule'. Depending on the value of a select box, different fields are shown.
<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. I'm not really sure how to make this degrade gracefully without Javascript, because as stated, some of the fields are just completely inappropriate for various schedule types.
My question is: In general, how would I make something that disables/hides inappropriate fields or does some pre/post processing degrade properly without Javascript?
I'd also be interested in specific sites that I could look at that handle this type of degradation well?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
基本思想是，您有一种标准（非 js）方式来做某事，然后添加 JavaScript 来覆盖该默认行为。
在您的例子中，您有一个
select，因此非 js 行为是当您选择一个选项时，您提交一个表单，该表单加载显示不同字段的新版本页面。您的 JavaScript（如果启用）将隐藏提交按钮并就地进行更新。
首选的思考方式是渐进增强，而且这种方式更容易实现。让您的页面像准 HTML 一样工作，然后使用 CSS 和 JavaScript 逐步增强它。那么您就不必考虑它是否会正常降级。
如果您的 JavaScript 和 CSS 位于单独的文件中而不是内联文件中，那么渐进式增强会更容易。借助 jQuery* 等 Ajax 库，您可以使用 CSS 选择器选择元素，以便向这些元素添加行为。在你的情况下，你会做
$('#schedule_Frequency').change(updateScheduleFields)（我认为你的 id 中不应该有句点）。* 免责声明：无需库即可在 JavaScript 中选择 HTML 元素，并且存在除 jQuery 之外的 Ajax 库。
The basic idea is that you have a standard (non-js) way of doing something, and then you add JavaScript to override that default behaviour.
In your case, you have a
select, so the non-js behaviour would be that when you select an option, you submit a form which loads a new version of the page with different fields shown.Your JavaScript (if enabled) will hide the submit button and do the updating in-place.
The preferred way of thinking about it is progressive enhancement, and it's much easier to achieve that way round. Make your page work as barebones HTML, then progressively enhance it with CSS and JavaScript. Then you never have to work out if it will degrade gracefully.
It's easier to do progressive enhancement if your JavaScript and CSS are in separate files rather than inline. With an Ajax library like jQuery*, you can select elements with CSS selectors in order to add behaviour to those elements. In your case, you'd do
$('#schedule_frequency').change(updateScheduleFields)(I don't think you should have a period in your id).* Disclaimer: It is possible to select HTML elements in JavaScript without a library, and Ajax libraries other than jQuery exist.
当您考虑网站正常降级时，请考虑如何在没有任何 JavaScript 的情况下使用该网站。然后使用 javascript 和 onload/ready 挂钩将站点的元素更改为您最初想要使用 javascript 的内容。这样，即使 JavaScript 被禁用，该网站也可以正常工作。如果启用，设置 JavaScript 将运行并转换页面。
通常这意味着有一个额外的“提交”按钮，您的设置 JavaScript 会隐藏该按钮或类似的东西。
When you think about sites degrading gracefully, think about how you would use the site without any javascript. Then use javascript and the onload/ready hook to change elements of your site into what you originally wanted with javascript. This way, if javascript is disabled, the site works. If it is enabled, the setup javascript will run and transform the page.
Usually this means having an extra "submit" button that your setup javascript hides or something like that.
在这种情况下，我要做的是在下拉列表下方有一个“下一步”按钮，将选择发布到服务器。然后您需要服务器端逻辑来显示/隐藏字段。我通常会先让它以这种方式工作，然后返回并添加 Javascript 功能来隐藏按钮并防止往返。
What I would do in this case is have a "Next" button below the drop-down list that posts the selection to the server. Then you would need server-side logic to show/hide the fields. I usually would get it working this way first, and then go back and add Javascript flair to hide the button and prevent the round-trip.
我相信简短的答案是你不会做这些类型的事情。对渲染页面的运行时修改是通过 JavaScript 实现的 - 当它被禁用时，您将无法使用这些类型的效果。
此外，如果没有 JavaScript，您将无法进行前后处理。您需要在后端实施检查/测试。
I believe the short answer is that you won't be doing those types of things. Run-time modification to the rendered page is achieved via JavaScript - when it is disabled you don't get to use those kinds of effects.
Additionally, you won't be doing pre-post processing without JavaScript. You'll need to implement your checking / testing in the back end.