На этом шаге мы рассмотрим основные способы использования этого виджета.
Материал этого шага базируется на http://it-route.ru/jeditable_manual_ru/.
Расширение Jeditable преобразует элементы, не являющиеся элементами форм, в поля ввода, доступные для редактирования, когда пользователь выполняет некоторое действие, такое как щелчок или двойной щелчок. Измененное содержимое элемента автоматически отправляется на сервер.
Адреса, где можно взять компонент: http://www.appelsiini.net/projects/jeditable/ или http://plugins.jquery.com/project/jeditable/.
Данный редактор работает следующим образом: пользователь щелкает левой кнопкой мыши на блоке текста страницы. Блок текста становится формой. Пользователь редактирует содержимое и нажимает кнопку Отправить. Новый текст отправляется на сервер и так сохраняется. Форма снова преобразуется в блок текста.
Рис.1. Результат работы скрипта
Полный текст этого примера можно взять здесь.Рассмотрим основные принципы работы этого скрипта.
Для примера будем использовать следующий HTML-код:
<body> <div id="div_1">QUEEN</div> <div class="edit" id="div_2"> Queen - популярная британская рок-группа, добившаяся широчайшей известности в середине 70-х годов XX столетия, является одной из наиболее успешных групп в истории рок-музыки. </div>
Единственный обязательный параметр - это адрес, на который будет отправляться отредактированный текст:
// Jeditable
$(document).ready(function(){
$('.edit').editable('../cgi-bin/echo.php');
});
Код, приведенный выше, делает следующее: элементы, имеющие класс edit, становятся редактируемой формой. Редактирование начинается c одинарного щелска левой клавишей мыши по этому элементу. Элемент редактирования в полученной форме имеет тип text. Ширина и длина элемента совпадает с размерами оригинального текстового блока. Если пользователь щелкнет мышью за пределами формы - изменения отменяются и форма удалится. Такое же действие произойдет, если пользователь нажмет клавишу ESC. Когда пользователь нажмет клавишу ENTER, происходит отправка измененных данных формы скрипту echo.php, находящемуся по указанному адресу.
Давайте добавим несколько параметров.
Используем элемент textarea для блоков, имеющих класс edit_area. Они также будут иметь изображение, которое будет появляться в процессе загрузки данных на сервер. Элементы с классом edit будут иметь вместо изображения текст Saving…. В качестве бонуса давайте добавим подсказки. Они подскажут пользователям, что нужно сделать.
// Jeditable
$(document).ready(function(){
$('.edit').editable('../cgi-bin/echo.php', {
indicator : 'Saving...',
tooltip : 'Щелкните для редактирования...'
});
$('.edit_area').editable('../cgi-bin/echo.php', {
type : 'textarea',
cancel : 'Отмена',
submit : 'OK',
indicator : '<img src="images/loading.gif" alt="" />',
tooltip : 'Щелкните для редактирования...'
});
});
Рис.1. Результат работы скрипта
Полный текст этого примера можно взять здесь.Приведем дополнительно текст файла echo.php:
<?php
echo iconv('UTF-8', 'WINDOWS-1251', $_REQUEST ["value"]);
?>
Обратите внимание, что здесь используется функция iconv() для перекодирования текста. Это нужно для того, чтобы корректно отображалась кириллица.
Этих двух примеров достаточно для большинства нужд. Для тех, кому этого мало - давайте продолжим.
На следующем шаге мы продолжим изучение этого вопроса.
