Как мне сделать мою UI «деградируемую» с помощью JavaScript отключена?

Question

Я прочитал несколько сообщений, чтобы пользователи были отключены 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?

Я также должен был быть заинтересован в конкретных сайтах, которые я мог бы посмотреть, что хорошо справляется с этим типом деградации?

Answer 1

Основная идея заключается в том, что у вас есть стандартный (не js) способ выполнения чего-либо, а затем вы добавляете JavaScript, чтобы переопределить это поведение по умолчанию.

В вашем случае у вас есть select, Таким образом, поведение без JS будет то, что когда вы выбираете опцию, вы отправляете форму, которая загружает новую версию страницы с различными полями.

Ваш JavaScript (если включен) будет скрывать кнопку отправки и выполнить обновление на месте.

Предпочтительный способ думать об этом Прогрессивное улучшение, И намного легче достичь этого пути. Сделайте свою страницу работать как Barebone HTML, затем постепенно повышают его с помощью CSS и JavaScript. Тогда вам никогда не придется работать, если он будет ухудшаться изящно.

Проще сделать прогрессивное улучшение, если ваш JavaScript и CSS находятся в отдельных файлах, а не встроенные. С библиотекой Ajax, как jQuery *, вы можете выбрать элементы с помощью селекторов CSS, чтобы добавить поведение в эти элементы. В вашем случае вы бы сделали $('#schedule_frequency').change(updateScheduleFields) (Я не думаю, что у вас должен быть период в вашем ID).

* Отказ от ответственности: можно выбрать HTML-элементы в JavaScript без библиотеки, а библиотеки AJAX, отличные от jQuery.

Answer 2

Когда вы думаете о сайтах изящно разлагаются, подумайте о том, как вы будете использовать сайт без какого-либо JavaScript. Затем используйте JavaScript и крючок нагрузки / готов, чтобы изменить элементы вашего сайта в то, что вы изначально хотели с JavaScript. Таким образом, если JavaScript отключен, сайт работает. Если он включен, установка JavaScript будет работать и преобразовать страницу.

Обычно это означает, что имеет дополнительный «отправить» кнопку, что ваша настройка JavaScript скрывается или что-то подобное.

Answer 3

То, что я бы сделал в этом случае, есть кнопка «Далее» ниже раскрывающегося списка, которая публикует выбор на сервере. Тогда вам нужна логика Server-Side, чтобы показать / скрыть поля. Я обычно получал бы это работать в первую очередь, а затем вернуться и добавить JavaScript Flair, чтобы скрыть кнопку и предотвратить туристическую поездку.

Answer 4

Я считаю, что краткий ответ - это то, что вы не будете делать эти типы вещей. Модификация времени выполнения к отображенной странице достигается через JavaScript - когда она отключена, вы не используете эти виды эффектов.

Кроме того, вы не будете делать предварительную обработку без JavaScript. Вам нужно будет реализовать вашу проверку / тестирование на заднем конце.