Любые идеи о том, как сделать редактирование на месте разлагаемой?

Question

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

Answer 1

Звучит так, как будто вы приближаетесь к этому с неправильного направления. Вместо того, чтобы создавать редактирование на месте и получать хорошее ухудшение (угол постепенного ухудшения), вам действительно нужно создать не-Javascript версию для редактирования, а затем добавить редактирование на месте с использованием Javascript после загрузки страницы, ссылка как Прогрессивное улучшение .

Для этого есть два варианта. Создайте отображение в виде формы с кнопкой отправки, которая работает без Javascript, затем с помощью Javascript замените входные данные какой-либо меткой, которая выполняет редактирование на месте. Вы должны быть в состоянии использовать комбинацию меток и атрибутов id, чтобы выбрать правильные свойства для вашей реализации редактирования на месте для работы. Другой вариант, если вы не хотите, чтобы форма отображалась по умолчанию, - это отображать значения с помощью кнопки / ссылки, чтобы превратить ее в форму с использованием обработки на стороне сервера, а затем добавить к ней правку редактирования.

Answer 2

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

Таким образом, у меня просто была бы ссылка для редактирования всего рассматриваемого элемента, а затем для создания элементов управления редактирования на месте в JavaScript при загрузке страницы, скрывая ссылку для редактирования, если вы предпочитаете, чтобы пользователи не использовали команду edit- на месте, когда доступно.

Answer 3

Попробуйте использовать стиль ввода текста, и после загрузки страницы сделайте его доступным только для чтения, используя атрибут readonly. и когда щелкните по нему, удалите атрибут readonly, и onblur снова сделает его доступным только для чтения. при нажатии на кнопку «Сохранить» или на событие onblur сделайте Ajax-запрос на сохранение данных на сервере.

Answer 4

Я предполагаю, что вы пытаетесь сделать что-то вроде следующего сценария:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Где - это кнопка, которая заменяет на , чтобы ее можно было редактировать. Есть несколько способов сделать это изящным (например, работать без JavaScript).

Теоретически:

Используя CSS, сделайте это с помощью псевдо-селекторов. : active в некоторой степени похож на событие onclick, поэтому, если вы вложите скрытый в

, этот CSS скрывает и показывает при щелчке по li. li:active #editable { display:none; } li:active input{ display:block; } Это может работать в вашем любимом браузере, но вы без сомнения обнаружите, что он ломается в IE. На практике: Используйте ссылку. Пусть будет действительной ссылкой, ведущей на страницу, где эта подстановка ввода / пролета была выполнена на стороне сервера. Вы прикрепляете обработчик событий к , который использует MooTools для отмены события щелчка для людей, у которых есть JS, например:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 5

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

Answer 6

Если это текстовое содержимое, вы можете отобразить редактируемое содержимое в качестве кнопки отправки типа ввода с заголовком содержимого. При щелчке он отправит всю форму, сохранив другие значения, и покажет диалоговое окно редактирования. После этого значения формы могут быть восстановлены.