Есть идеи о том, как сделать редактирование на месте разлагаемым?

StackOverflow https://stackoverflow.com/questions/153061

Вопрос

В настоящее время я пишу скрипт редактирования на месте для 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-запрос для сохранения данных на сервере.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top