Есть идеи о том, как сделать редактирование на месте разлагаемым?
Вопрос
В настоящее время я пишу скрипт редактирования на месте для MooTools, и я немного озадачен тем, как я могу заставить его изящно деградировать без JavaScript, сохраняя при этом некоторую функциональность.Я хотел бы каким-то образом использовать прогрессивное улучшение.Я ищу не код, а скорее концепцию того, как можно было бы подойти к ситуации.Если у вас есть какие-либо идеи или вы знаете о каких-либо сценариях редактирования на месте, которые изящно ухудшают качество, пожалуйста, поделитесь.
Решение
Похоже, вы подходите к этому с неправильной стороны.Вместо того, чтобы создавать edit-in-place и заставлять его красиво деградировать (изящный угол деградации), вам действительно следует создать версию без Javascript для редактирования, а затем добавить edit-in-place с использованием Javascript после загрузки страницы, обозначенную как Прогрессивное совершенствование.
Для этого есть два варианта.Создайте отображение в виде формы с кнопкой отправки, которая работает без Javascript, затем с помощью Javascript замените входные данные какой-нибудь меткой, которая выполняет редактирование на месте.Вы должны быть в состоянии использовать комбинацию меток и атрибутов id, чтобы выбрать правильные свойства для работы вашей реализации edit-in-place.Другой вариант, если вы не хотите, чтобы форма отображалась по умолчанию, - это отобразить значения с помощью кнопки / ссылки для превращения ее в форму с использованием обработки на стороне сервера, а затем добавить к ней функцию редактирования в палитре.
Другие советы
Вы вообще не можете выполнять редактирование на месте без JavaScript, поэтому постепенное ухудшение для него состоит в том, чтобы убедиться, что пользователь все еще может редактировать рассматриваемый элемент, когда JavaScript недоступен.
Таким образом, у меня просто была бы ссылка для редактирования всего рассматриваемого элемента, а затем создания элементов управления edit-in-place в JavaScript при загрузке страницы, скрыв ссылку edit, если вы предпочитаете, чтобы пользователи использовали edit-in-place, когда это доступно.
Если это текстовое содержимое, вы могли бы отобразить редактируемое содержимое в виде кнопки отправки типа ввода с заголовком содержимого.При нажатии он отправит всю форму целиком, сохранив остальные значения, и покажет диалоговое окно редактирования.Впоследствии значения формы могли быть восстановлены.
Возможно, поместите входные данные в div под каждым элементом, у которого есть возможность редактирования на месте.Когда страница загрузится, используйте javascript, чтобы скрыть эти разделы.Таким образом, они будут доступны только в том случае, если javascript никогда не запускается.
Я предполагаю, что вы пытаетесь сделать что-то вроде следующего сценария:
<li>
<span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>
Где <a> - это кнопка, которая заменяет <span> на <input>, чтобы ее можно было редактировать.Есть несколько способов сделать это изящно (т.е. работать без javascript).
Теоретически:
Используя CSS, сделайте это с помощью псевдоселекторов.:active чем-то похоже на событие onclick, поэтому, если вы вставляете скрытое <input> в <li>, этот CSS скрывает <span> и показывает <input> при нажатии на li.
li:active #editable { display:none; } li:active input{ display:block; }
Это может работать в вашем любимом браузере, но вы, без сомнения, обнаружите, что в IE это не работает.
На практике:
Используйте ссылку.Пусть это <a> будет фактической ссылкой, которая ведет на страницу, где эта замена ввода / интервала была выполнена на стороне сервера.Вы устанавливаете обработчик событий на <a>, который использует MooTools для отмены события click для людей, у которых есть JS, вот так:
function make_editable(evt) { var evt = new Event(evt); evt.preventDefault(); }
Попробуйте использовать стилизованный вводимый текст, а после загрузки страницы сделайте его доступным только для чтения, используя атрибут readonly .и когда вы нажимаете на него, удалите атрибут только для чтения, а onblur снова сделает его доступным только для чтения.при нажатии на кнопку "Сохранить" или на событие onblur сделайте Ajax-запрос для сохранения данных на сервере.