Как мне сделать мою UI «деградируемую» с помощью JavaScript отключена?
-
30-09-2019 - |
Вопрос
Я прочитал несколько сообщений, чтобы пользователи были отключены 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, потому что, как указано, некоторые поля просто совершенно не подходят для различных типов графика.
Мой вопрос: В целом, как бы я сделал то, что отключает / скрывает неподходящие поля или правильно ухудшается некоторая обработка Pre / Post без JavaScript?
Я также должен был быть заинтересован в конкретных сайтах, которые я мог бы посмотреть, что хорошо справляется с этим типом деградации?
Решение
Основная идея заключается в том, что у вас есть стандартный (не js) способ выполнения чего-либо, а затем вы добавляете JavaScript, чтобы переопределить это поведение по умолчанию.
В вашем случае у вас есть select
, Таким образом, поведение без JS будет то, что когда вы выбираете опцию, вы отправляете форму, которая загружает новую версию страницы с различными полями.
Ваш JavaScript (если включен) будет скрывать кнопку отправки и выполнить обновление на месте.
Предпочтительный способ думать об этом Прогрессивное улучшение, И намного легче достичь этого пути. Сделайте свою страницу работать как Barebone HTML, затем постепенно повышают его с помощью CSS и JavaScript. Тогда вам никогда не придется работать, если он будет ухудшаться изящно.
Проще сделать прогрессивное улучшение, если ваш JavaScript и CSS находятся в отдельных файлах, а не встроенные. С библиотекой Ajax, как jQuery *, вы можете выбрать элементы с помощью селекторов CSS, чтобы добавить поведение в эти элементы. В вашем случае вы бы сделали $('#schedule_frequency').change(updateScheduleFields)
(Я не думаю, что у вас должен быть период в вашем ID).
* Отказ от ответственности: можно выбрать HTML-элементы в JavaScript без библиотеки, а библиотеки AJAX, отличные от jQuery.
Другие советы
Когда вы думаете о сайтах изящно разлагаются, подумайте о том, как вы будете использовать сайт без какого-либо JavaScript. Затем используйте JavaScript и крючок нагрузки / готов, чтобы изменить элементы вашего сайта в то, что вы изначально хотели с JavaScript. Таким образом, если JavaScript отключен, сайт работает. Если он включен, установка JavaScript будет работать и преобразовать страницу.
Обычно это означает, что имеет дополнительный «отправить» кнопку, что ваша настройка JavaScript скрывается или что-то подобное.
То, что я бы сделал в этом случае, есть кнопка «Далее» ниже раскрывающегося списка, которая публикует выбор на сервере. Тогда вам нужна логика Server-Side, чтобы показать / скрыть поля. Я обычно получал бы это работать в первую очередь, а затем вернуться и добавить JavaScript Flair, чтобы скрыть кнопку и предотвратить туристическую поездку.
Я считаю, что краткий ответ - это то, что вы не будете делать эти типы вещей. Модификация времени выполнения к отображенной странице достигается через JavaScript - когда она отключена, вы не используете эти виды эффектов.
Кроме того, вы не будете делать предварительную обработку без JavaScript. Вам нужно будет реализовать вашу проверку / тестирование на заднем конце.