Впервые я увидел версию этого приложения на сайте www.quirksmode.org, а позже нашел Web 2.0 версию на сайте www.24ways.org.
Я хочу рассказать вам о двух способах использования библиотеки jQuery, с помощью которых можно достигнуть такого же, если не лучшего результата.
Цель
AJAX (или AHAH) - технология, позволяющая пользователям редактировать просматриваемую страницу HTML, не закрывая ее.
Концепция
Нажмите на текст, который собираетесь редактировать, и перед вами удивительным образом появится текстовая область с расположенными внизу кнопками «Сохранить» и «Отменить редактирование». Изменения с помощью AHAH преобразовываются в скрипты PHP, которые, как правило, используются для обновления баз данных (MySQL или неструктурированных файлов).
Демонстрация
«Edit In Place» - компонент административной панели приложения Ajax 1
В первой демонстрационной версии я использую элемент div с идентификатором ID «editInPlace». Когда курсор стоит на элементе div, задний фон меняет цвет на бледно-желтый. После того, как вы нажимаете на текст, открывается DOM (объектная модель документа), а элемент div удивительным образом превращается в текстовую область, внутри которой можно редактировать текст.
Нажимаем на кнопку «Сохранить», и новая страница HTML преобразуется в скрипты PHP, которые отображают полученные данные с помощью массива $_POST.
В реально существующем приложении вам еще придется настроить несколько дополнительных параметров безопасности, а затем обновить данные и отправить подтверждение успешного выполнения задачи в библиотеку jQuery.
Но в этом примере информация, отсылаемая в PHP скрипт, возвращается назад в jQuery и показывается в простом окне.
Объяснения
Способ, с помощью которого я все это выполняю, достаточно известен. Запомните, если вы не хотите использовать функцию jQuery document.ready, будьте готовы использовать метод init() function
<!--start_raw-->
$(document).ready(function(){
setClickable();
});
<!--end_raw-->
Первым делом сработает функция setClickable(). Данная функция предназначена для следующего:
Ищет элементы div с ID =”editInPlace” и сообщает jQuery необходимость начинать преобразования после того, как нажат div.
<!--start_raw-->
function setClickable() {
$('#editInPlace').click(function() {
<!--end_raw-->
Вставляет страницы html внутрь элементов div с использованием функции jQuery’s html(). Эта страница html размещается внутри других html, после чего отображается текстовая область и кнопки «Сохранить» и «Отмена».
var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
var revert = $(this).html();
Та же страница html размещается в элементе div с ID=”editInPlace” для того, чтобы можно было вернуться к первоначальному виду, в случае, если вы решите использовать кнопку «Отменить».
<!--start_raw-->var revert = $(this).html();<!--end_raw-->
DOM элемент “After” используется для вставки новой текстовой области html после ссылаемого узла div. Сразу же после этого, с целью сохранения места, я отправляю jQuery команду переместить элемент div.
<!--start_raw-->$(this).after(textarea+button).remove();<!--end_raw-->
Используя jQuery, я адаптирую кнопки «Сохранить» и «Отменить», используя их классовые имена. jQuery запускает последнюю функцию “Сохранить изменения” после того, как вы нажмете соответствующую кнопку. Я закрываю окно сообщения jQuery, показывающее необходимые действия, которые выполняются после нажатия элемента div. При этом не ставлю в конце апостроф, так как после этого элемента последует еще несколько действий.
<!--start_raw-->$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})<!--end_raw-->
Далее я вписываю в код «mouseover» или «mouseout». Эти команды передают jQuery необходимость добавить или удалить класс, когда курсор направляется на нужный элемент div (id=”editInPlace”).
<!--start_raw-->
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};//end of function setClickable
<!--end_raw-->
Функция “saveChanges” превращает объект кнопки в первую переменную, а отменённая переменная становится ложной или содержит страницу html, которую я сохранял в параметрах возвращения к исходным данным.
<!--start_raw-->
function saveChanges(obj, cancel) {
<!--end_raw-->
Если функция “cancel” является ложной, тогда я сохраняю изменения, преобразовывая html в php скрипты. Я забираю html из текстовой области, используя функции DOM, доступные благодаря библиотеке jQuery: parent() и siblings().
<!--start_raw-->
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
<!--end_raw-->
Основные возможности DOM вне пределов этих функций. Как правило, я задаю команду jQuery “Объект (save button), который имеет родителя (div)… Искать. Этот объект имеет один или более объектов на том же уровне дерева DOM… Мне нужен первый объект. Найти величину объекта”.
(Если подумать… конечно, если вы не знакомы со способом кодировки DOM, пожалуй, мои объяснения не будут иметь для вас никакого смысла. Предлагаю вам найти “DOM javascript” в системе поиска Google, ну или “что-то в этом роде”).
Эта страница html имеет поле переменной “t” и сейчас пришло время передать ее через POST в файл test2.php.
<!--start_raw-->
$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}
<!--end_raw-->
Если отмененная переменная имеет величину, тогда страницу html следует изначально сохранить в переменной возвращения к исходным данным. Итак, в этом случае поле переменной “t” следует передать в первоначальную html.
<!--start_raw-->
else {
var t = cancel;
}
<!--end_raw-->
Следующий шаг - использование функций DOM в рамках библиотеки яваскриптов jQuery, для размещения новых div, с ID “editInPlace” после элемента, содержащего текстовую область… а затем убираем div, содержащий текстовую область.
<!--start_raw-->
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove() ;
<!--end_raw-->
Вкратце, это дает следующую команду библиотеке jQuery: “Сделайте два шага назад на ветвь DOM. Поместите HTML после объекта, найденного здесь, а затем переместите объект”.
В итоге, мы снова вызываем функцию «setClickable» и закрываем функцию «saveChanges()». Цель этого вызова - переустановка событий «onMouseover», «onMouseout» и «onClick».
<!--start_raw-->
setClickable();
}
<!--end_raw-->
Второй пример
Второй пример очень похож на первый, но немного сложнее.
«Edit In Place» -компонент административной панели приложения Ajax 2
Вместо одного большого элемента div в этом примере каждый тег P управляет отдельной редактируемой областью.
Трудность возникает в случае, если вы захотите отправить данные на серверные скрипты, и при этом адаптируете верный Р-тег для обновления базы данных.
Я нашел этому решение: нужно пронумеровать каждый Р-тег и отправить коды PHP. В окошке предупреждения вы увидите, что коды PHP «распознали», какие именно P-теги были изменены.
Как узнать результат
Если вы использовали что-то похожее в своей работе, я думаю, вы захотели проверить, действительно ли произошли какие-то изменения перед тем, как сообщать jQuery команду обновить DOM новой страницей html.
Базой данных не предусмотрена подобная демонстрация, поэтому я этот шаг опустил.
Популярность: 86%
RSS комментариев.
25.02.2008 от 
ROM 
RSS Записей 
Поддержи сайт!
