Friday, January 11, 2008

Расширение inline-edit для Mootools

В статье о моем опыте использования Mootools я кратко рассказал об этой библиотеке и описал способ решения проблемы перетаскивания объектов, имеющейся в библиотеке Mootools. А теперь я хотел бы рассказать о расширении для этой библиотеки под названием inlineEdit.

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

Я применял этот скрипт при разработке онлайнового календаря аля Google Calendar. В соответствии с заданием заказчика для календарной сетки необходимо было реализовать переключение между режимами редактирования и создания заметок - popup-окно (как это реализовано в Google) и inline-редактирование.

Использовать этот код достаточно просто. Нужно подключить код библиотеки Mootools и скрипт inlineEdit к своей странице. Я не буду приводить здесь свой код, потому что он достаточно сложен для примера, а вот пример из документации будет очень кстати:

<div id="editarea">
<h1>I am Justin</h1>
<p>Hello World</p>
</div>
<script>
var inlineEditor = new inlineEdit('editarea',{indicatorText: 'edit this'}); //Makes text inside 'editarea' inline editable
inlineEditor.deactivate(); //Deactivates the ability to edit the text
inlineEditor.toggle(); //Toggles the ability to edit the text (in this situation it would turn it back on since we just turned it off)
</script>

При наступлении события редактирования на месте расположения редактируемого текста появляется элемент HTML input или textarea, со стилями, настроенными таким образом, чтобы самих элементов редактирования видно не было. Для пользователя все выглядит так, будто прямо в тексте появился курсор и теперь текст можно редактировать.

Если у вас возникнут проблемы со стилями, возможно придется править исходный код inlineEdit, как это пришлось делать мне. Свои стилистические правки вы можете сделать в функции setAllStyles. В не сложных проектах этого делать не потребуется.

Использование inline-редактирования удобный способ правки простого текста, который обязательно оценят ваши пользователи.

Мне осталось только сказать, что автор этого расширения inlineEdit для Mootools - Justin Maier. Скачать последнюю версию скрипта вы можете на его сайте.

No comments: