Этот простой туториал посвящен тому, как сделать любой текст на странице динамически редактируемым. В общем виде работает это так: пользователь щелкает мышью по тексту, который нужно отредактировать, в результате чего на этом месте появляется форма для редактирования. После того, как пользователь внес изменения, он нажимает кнопку OK и скрипт автоматически отправляет AJAX запрос на сервер, сохраняя введенные данные. После этого форма исчезает, а на её месте остается отредактированный текст.
Для выполнения такой задачи, нам понадобятся библиотека jQuery и плагин Jeditable.
Начнем с создания HTML страницы, в которой выделим текст, который необходимо редактировать, заключив его в <div> с классом editable. Здесь же подключаем нужные нам скрипты jquery.js и jquery.jeditable.js:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jeditable.js"></script> </head> <body> <div class="editable"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </div> <hr/> <div class="editable"> Aenean ut mauris nec nisl varius volutpat.... </div> <hr/> <div class="editable"> Aenean pharetra. Curabitur non turpis.... </div> </body> </html>
Далее пишем скрипт, который будет инициализировать нужные нам блоки текста:
$(document).ready(function() {
$(".editable").editable("/jedit/file.php",
{
type : 'textarea',
cancel : 'Отмена',
submit : 'OK',
indicator : '
',
tooltip : "Щелкните чтоб отредактировать этот текст"
}
);
});
Здесь селектор $(”.editable”) выделяет нужные нам блоки кода, а фукнция editable инициализирует их с указанными параметрами. Первый параметр – это URL, на который будет отправляться AJAX запрос при сохранении изменений. Второй параметр – это опции. Вкратце опишу, что они значат:
- type – указывает на тип элемента редактирования. По умолчанию используется простое текстовое поле (<input type=”text”>), но можно указать и textarea, как сделано в нашем примере. Также, эта опция может иметь значение select (будет рассмотрено ниже)
- cancel – указывает на то, что нужно отображать кнопку “отмена”. По умолчанию кнопки нет, отменить редактирование можно клавишей Esc.
- ОК – указывает на то, что нужно отображать кнопку “ОК”, то есть кнопку сохранения изменений. По умолчанию кнопки нет, сохранить изменения можно клавишей Enter.
- indicator – индикатор ожидания – форматированный текст (допускаются HTML теги), который будет отображаться при отправке запроса на сервер. Здесь я использовал <img> чтобы показать анимированный индикатор.
- tooltip – всплывающая подсказка, которая будет показана при наведении мышки на редактируемый блок текста.
AJAX запрос, который отправляется на сервер, имеет два параметра: id и value:
id=elements_id&value=user_edited_content
Если вы хотите изменить названия этих двух параметров, то это можно сделать, присвоив нужные значения опциям id и name:
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue'
});
});
Теперь представьте себе ситуацию, когда пользователю нужно отредактировать какой то короткий кусок текста, однако вводить не что попало, а выбирать некоторое определенное значение. В этом случае было бы удобно вместо текстового поля показывать выпадающий список. Это можно сделать, указав в качестве опции type значение select, а в параметре data указать объект со всеми значениями для списка:
$('#country').editable('/jedit/country.php', {
data : " {'U':'Украина','B':'Белоруссия','R':'Россия', 'selected':'U'}",
type : 'select',
submit : 'OK',
indicator : '',
tooltip : "Щелкните чтоб выбрать страну"
});
Обратите внимание на значение ’selected’ в объекте data. Таким образом указывается элемент списка, который должен быть выбран. В результате при щелчке мышки на таком тексте, вместо него появится выпадающий список. Пользователю остается только выбрать один из предлагаемых вариантов и сохранить свой выбор, нажав ОК.
Биржа труда – работа николаев
Эксперт-Смета: расчет смет
Клиника Оксфорд Медикал – потенция лечение
