Редактируем контент с помощью jQuery
Представленный простой туториал посвящается тому, как создать какой-либо текст на странице статически редактируемым. В целом виде это так работает: пользователь по тексту, который необходимо редактировать, щелкает мышкой, в итоге на этом месте всплывает форма для редактирования. Далее после внесения пользователем изменений, пользователь должен нажать кнопку «Ок» и скрипт автоматически отправит на сервер AJAX запрос, сохраняя при этом введенные данные. После чего форма исчезнет, а ее место займет уже отредактированный текст.
Для того чтобы выполнить эту задачу, понадобится плагин Jeditable и библиотека jQuery.
Приступим с образования 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 – подсказка, которая всплывает и становится видной при наведении мышкой на редактируемый блок текста.
Двумя параметрами (id и value) обладает AJAX запрос, который на сервер отправляется:
id=elements_id&value=user_edited_content
В том случае если вам захочется поменять названия этих двух параметров, то это так можно сделать: необходимые значениями опциями name и id:
$(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 : “Щелкните, чтобы выбрать страну”
});
В объекте data обратите свое внимание на значение ’selected’. Именно так указывается часть текста, который избирается. В итоге на том месте вместо него при щелчке мышки, возникает выпадающий список. Вам останется лишь выбрать какой-либо из предлагаемых вариантов и свой выбор сохранить, кликнув Ок.
Было бы здорово если бы вы показали работающий пример. Просто самому все делать ка кто ломает. =)
Ок =) В ближайшее время сделаю и выложу ссылку сюда.
Если слегка поискать по сайту jQuery - можно найти ссылку с примером
http://15daysofjquery.com/examples/jqueryEditInPlace/divEdit.php
Присоединяюсь к Piom, хотелось бы видеть демку.
Мысли интересные, но как-то суховато написано…