Как мне сделать мой пользовательский интерфейс «изящно» с отключенным Javascript?

Question

Я читал в нескольких сообщениях на 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?

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

Answer 1

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

В вашем случае у вас есть select,поэтому поведение не-js будет таким: когда вы выбираете опцию, вы отправляете форму, которая загружает новую версию страницы с отображением различных полей.

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

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

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

* Отказ от ответственности: Можно выбрать элементы HTML в JavaScript без библиотеки, и существуют библиотеки Ajax, отличные от jQuery.

Answer 2

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

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

Answer 3

В этом случае я бы сделал кнопку «Далее» под выпадающим списком, которая отправляет выбор на сервер. Тогда вам потребуется серверная логика, чтобы показать / скрыть поля. Обычно я сначала заставляю его работать таким образом, а затем возвращаюсь и добавляю Javascript flair, чтобы скрыть кнопку и предотвратить круговое путешествие.

Answer 4

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

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