—»     —»   Динамическое редактирование полей в стиле Flickr при помощи jQuery и CSS3
  Раздел: Формы   Комментариев: 2  

Динамическое редактирование полей в стиле Flickr при помощи jQuery и CSS3



Типичный дизайн Flickr включает в себя множество Ajax-панелей, которые вы можете динамично редактировать прямо на странице. Шаблон этого веб-сайта инкорпорирует многие тренды web 2.0, посредством которых вы можете перемещаться от настроек аккаунта к настройках фотографии и загрузкам. Есть множество ресурсов, на которые стоит обратить внимание, и в нашем сегодняшнем руководстве мы хотим сосредоточиться именно на одном конкретном свойстве.

Мы можем создать набор небольших динамичных фото с заголовками и описанием. Затем при помощи jQuery мы можем определять, когда пользователь кликает по ним и хочет их изменить. Это очень удобная технология для создания пользовательских интерфейсов посредством всего нескольких блоков кода. Мы не будем сохранять какие-то данные в базу данных, но привязка к PHP-скрипту на стороне пользователя поможет нам осуществить все нужные процедуры.

Динамическое редактирование полей в стиле Flickr при помощи jQuery и CSS3

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Контент главной страницы

В основном HTML-файле мы используем обычный HTML5 doctype с ссылкой на библиотеку jQuery 1.7.2. Большая часть документа будет позиционирована обычно, где в строку будет выставлено по 2 изображения.

Мы используем класс .photobox, который будет содержать каждый отдельный элемент фото. Внутри будут все внутренние элементы, которые нам нужны (вроде полей ввода и кнопки сохранить/отменить). По умолчанию они будут скрыты при помощи CSS, но мы можем изменить все стили посредством jQuery. Ниже мы хотим привести пример одного элемента блока с фото.

<div id="p1" class="photobox">
<a href="http://instagram.com/p/OMiIfhDu-4/"><img src="images/farm-photo-filter-effects.png" alt="image #1"></a>
<h4 class="title">Cavalinho Horse</h4>
<p class="desc">Click to add a description</p>
<input type="text" name="title" value="Cavalinho Horse" class="onefield">
<textarea name="desc" class="textfield">Click to add a description</textarea>
<a href="#" class="save">Save</a> <a href="#" class="cancel">Cancel</a>
</div>

Существуют и другие методы, посредством которых мы можем динамически добавлять новые поля ввода на страницу, после того, как пользователь кликает по кнопке редактирования. Но нам кажется, что немного нелепо создавать несколько полей редактирования к одному и тому же элементу на странице, и гораздо более безопасно будет скрыть поля формы. К тому же, у нас есть все необходимые DOM-элементы, которые загружаются в одно и то же время.

Динамические блоки контента

Давайте перейдем сразу к коду jQuery, чтобы понимать то, как эти элементы управляются. Мы создали внешний файл script.js, который содержит несколько контроллеров событий.

$(".title, .desc").hover(function(){
var previtem = $(this).prev();
$(this).addClass("litehover");

if(previtem.attr("class") == "title") {
previtem.addClass("litehover");
} else {
$(this).next().addClass("litehover");
}
}, function() {
// on hover off
var currenttag = $(this).prop("tagName");
$(this).removeClass("litehover");

if(currenttag == "H4"){
$(this).next().removeClass("litehover");
}
else {
$(this).prev().removeClass("litehover");
}
}
}); // end title/desc hover event

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

Очень просто убрать классы подсветки с помощью этого события. Этот контроллер событий включает в себя большой объем кода, так как мы стараемся компенсировать отрывки и для заголовка и для описания. Когда вы наводите курсор мыши на один из элементов, то его также нужно подсветить!

Обрабатываем новые поля ввода

Следующий контроллер событий, который мы будем привязывать, будет указывать на блоки заголовка и описания при каждом событии клика. Мы используем контроллер событий jquery .on(), который незамедлительно привязывает DOM-элементы в отличие от .live(), который постоянно инспектирует всю страницу.

Мы используем довольно интересный метод .prop(), который позволяет извлекать на данный момент выбранное имя тега. Когда пользователь кликает либо по заголовку, либо по описанию, нам нужно знать, по какому именно элементу он кликает, чтобы позволить отредактировать нужный элемент. Мы можем реализовать это посредством заявления if/else и проверки на предмет того, является ли текущий элемент H4-заголовком или нет.

$(".title, .desc").on("click", function(){
var currenttag = $(this).prop("tagName");
var titletag;
var desctag;
var titlevalue;
var descvalue;

if(currenttag == "H4") {
titletag = $(this);
desctag = $(this).next();
titlevalue = $(this).html();
descvalue = desctag.html();
} else {
titletag = $(this).prev();
desctag = $(this);
titlevalue = titletag.html();
descvalue = $(this).html();
}

titletag.css("display", "none");
desctag.css("display", "none");

$(this).siblings(".onefield").css("display", "block");
$(this).siblings(".textfield").css("display", "block");
$(this).siblings("a").css("display", "inline-block");
}); // end title/desc click event

Также последние несколько строк кода отображают то, как мы переключаемся между статичным контентом и полями ввода. Независимо от того, по какому элементу кликает пользователь, нам нужно скрыть как заголовок, так и описание, а затем отобразить смежные элементы.

Мы указываем отдельные поля ввода за счет их имен классов. Тем не менее, для двух анкорных ссылок мы просто использовали $(this).siblings("a") в качестве селектора. Так как у нас внутри блока с фото нет других анкорных ссылок, этот путь будет более безопасным и простым, нежели использовать их классы.

Управление запросами на сохранение и отмену

Финальная основная часть нашего скрипта заключается в управлении любыми сохраненными изменениями. Мы используем .live() для этих кнопок, так как они по умолчанию скрыты, но нам нужно, чтобы их можно было распознать в DOM. Также мы запускаем событие клика в качестве параметра и поэтому мы можем использовать e.preventDefault(), который останавливает загрузку значения href.

$(".save").live("click", function(e){
e.preventDefault();
var titleval = $(this).prevAll(".onefield:first").val();
var descval = $(this).prevAll(".textfield:first").val();

var titlecontainer = $(this).siblings(".title");
var desccontainer = $(this).siblings(".desc");

titlecontainer.html(titleval).css("display", "block");
desccontainer.html(descval).css("display", "block");


$(this).prevAll(".onefield:first").css("display", "none");
$(this).prevAll(".textfield:first").css("display", "none");

$(this).next(".cancel").css("display", "none");
$(this).css("display", "none");
}); // end save btn click event

Первый контроллер запускается тогда, когда пользователь кликает, чтобы сохранить изменения. Первые две переменные удерживают текущее значение с каждого текстового поля, которые должны выступить в качестве новых значений, которые нам нужно отобразить на странице. Второй набор переменных указывает контейнеры заголовка и описания, даже несмотря на то, что они скрыты.

Мы изменяем параметр display в CSS для этих элементов заголовка и описания, а также вносим новые значения посредством .html(), и все это указано в одной строке кода. Часто такой подход называют цепочкой, и его стали часто использовать с развитием jQuery. Мы также скрываем поля ввода и кнопки, так же, как и при первой загрузке страницы.

$(".cancel").live("click", function(e){
e.preventDefault();

var titlecontainer = $(this).siblings(".title");
var desccontainer = $(this).siblings(".desc");

titlecontainer.css("display", "block");
desccontainer.css("display", "block");

$(this).prevAll(".onefield:first").val(titlecontainer.html()).css("display", "none");
$(this).prevAll(".textfield:first").val(desccontainer.html()).css("display", "none");
$(this).prev(".save").css("display", "none");
$(this).css("display", "none");
}); // end cancel btn click event

Контроллер live для кнопки отмены также проводит параметр события и предотвращает загрузку значения href в браузере. Мы также выставляем схожие переменные таргетинга, за исключением данного момента, так как нам нужно отменить изменения и сохранить значения прежними. Поля ввода теперь связаны изменениями параметра display в CSS, а также изменением в значении внутреннего элемента ввода .val().

Мы берем исходный контент из контейнеров заголовка и описания и заново применяем их к полям ввода. Таким образом, после того, как вы нажмете отмену и снова вернетесь к редактированию, значения полей сбросятся, и вы не увидите никаких изменений, внесенных прежде.

Динамическое редактирование полей в стиле Flickr при помощи jQuery и CSS3

В завершение

Надеемся, что данное руководство расскажет вам о некоторых сложных действиях в jQuery. Наш код не так уж и сложен, и в нем способен разобраться даже разработчик-новичок. Весь код соответствует современным стандартам в веб-дизайне и отлично работает во всех современных браузерах.

Если вам понравилось данное руководство, то вам обязательно стоит ознакомиться с демо, а также попробовать интегрировать код в собственные проекты. С другой стороны, вы можете скачать копию нашего исходного кода, и использовать ее без изменений. Структура кода очень гибка, и поэтому его можно адаптировать под любые веб-сайты.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS, отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 5441   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 декабря 2012 @ 21:46
Написал: Mmx — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А не проще взять плагин? И зачем кстати вам две каптчи???
Комментарий #2: 10 декабря 2012 @ 00:56
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Две каптчи где?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930