Любой пользовательский интерфейс, даже самый примитивный, сегодня не обходится без ajax запросов. Хорошо когда запросы проходят практически мгновенно, благодаря большой скорости соединения пользователя или по другим причинам, но что делать когда запрос длится очень долго? Нужно как-то сообщить пользователю, что все хорошо, скрипт не повис, отправка данных идет, “полет нормальный”. Для этого обычно отображают индикатор загрузки.

Используя JQuery.ajax очень легко отобразить и убрать индикатор загрузки когда это необходимо. Для этого существуют 2 события beforeSend и complete, на которые легко повесить соответствующее отображение индикатора.  Ниже я создаю div по событию beforeSend (запрос начался) и уничтожаю его по событию complete (запрос завершен).

div.ds-loading {
 background-image: url("/images/admin/loader.gif");
 background-repeat: no-repeat;
 position: fixed;
 width: 126px;
 height: 22px;
 z-index: 11111;
}

$.ajax({
  url: '/admin/photos/delete',
  data: "photo_id=" + photo_id,
  success: function(){
  },
  beforeSend: function(){
    //создаем div
    var loading = $("<div>", {
      "class" : "ds-loading"
    });
    //выравним div по центру страницы
    $(loading).css("top", ($(window).height()/2)-($(loading).height()/2)).css("left", ($(document).width()/2)-($(loading).width()/2));
    //добавляем созданный div в конец документа
    $("body").append(loading);
  },
  complete: function() {
    //уничтожаем div
    $(".ds-loading").detach();
  }
});

Но что делать, если таких запросов очень много? Вешать на каждый ajax запрос обработчики событий? Благодаря тому, что в JQuery 1.5 добавили дополнительные методы для работы с ajax, стало возможным, легко и непринужденно отобразить индикатор для всех JQuery ajax запросов выполняющийся на сайте, с помощью метода $.ajaxSetup. Просто добавляем следующий код перед началом первого ajax-запроса.

$.ajaxSetup({
  beforeSend: function(){
    //создаем div
    var loading = $("<div>", {
      "class" : "ds-loading"
    });
    //выравним div по центру страницы
    $(loading).css("top", ($(window).height()/2)-($(loading).height()/2)).css("left", ($(document).width()/2)-($(loading).width()/2));
    //добавляем созданный div в конец документа
    $("body").append(loading);
  },
  complete: function() {
    //уничтожаем div
    $(".ds-loading").detach();
  }
});

Теперь нам не нужно вешать обработчики событий на каждый вызов JQuery.ajax, этот функционал теперь “преднастроен” в каждом вызове.

Очень важным моментом в интерфейсе сайта является сохранение его текущего положения, для того, чтобы после перезагрузки страницы, пользователю не пришлось заново повторять свои действия с настройкой интерфейса сайта под себя. Идеальным средством для хранения состояния пользовательского интерфейса является cookies. Всем известно как работать с куки с помощью серверных (backend) языков,  но зачастую проще это делать напрямую из JavaScript. Конечно можно передавать данные интерфейса серверной части, а там уже сохранять их хоть в БД. Но как правило, если вы не разрабатывайте новый интерфейс для gmail, нет необходимости делать это для 5-6 параметров.

JavaScript и Cookies.

В JavaScript есть стандартные методы для работы с document.cookie, именно так происходит обращение к куки в JavaScript. Например функция для установки куки будет выглядеть следующим образом

function setCookie(c_name,value,expiredays)
 {
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
 }

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

Плагины cookies для JQuery.

Если в вашем сайте уже используется JQuery, то наиболее простой способ наладить работу с cookies, это использовать плагин. Плагинов довольно много я обычно использую ezCookie. В плагине содержатся стандартные методы для работы с cookies – установка, чтение, удаление. На странице проекта есть детальное описание всех методов. Плагин ezCookie отличается от многих подобных автоматическим распознаванием значения установленной cookie, и, если это JSON данные, то функция автоматически возвращает JSON объект. Такой режим работы позволяет устанавливать subcookie, то есть множества пар имя:значение для одного cookie (для одной cookie переменной).

Сохранение положения интерфейса.

Давайте напишем небольшой пример, который позволит понять схему сохранения простых позиций интерфейса. Пусть у нас будет 5 разноцветных квадратов, которые по клику на кнопку “закрыть” закрываются, и текст на кнопке меняется на “открыть”. И при нажатии на кнопку “открыть” соответственно квадрат снова становится видимым.

Для этого воспользуемся стандартной JQuery функцией toggle (переключатель), которая в качестве аргументов принимает 2 функции, одна из которых срабатывает на четном щелчке мыши, другая на нечетном. Чтобы сохранить положение квадратов, мы в первой toggle функции будем устанавливать значение cookie в 0, а на второй функции в 1, ноль означает, что квадрат скрыт, а единица соответственно, что квадрат виден.

Здесь я использую функцию ezCookie $.setSubCookie, чтобы не увеличивать количество записей cookie. Так как структурно записи для каждого квадрата у нас равны, то все проще хранить в одной cookie с именем “ui_save”. В качестве дополнительных параметров метод $.setSubCookie позволяет установить время жизни cookies, но в данном случае используется время жизни по умолчанию.

Итак позицию интерфейса в зависимости от действий пользователя мы записали, теперь нам необходимо сделать так, чтобы после загрузки страницы интерфейс возвращался в записанное состояние. Для этого мы сначала считаем нашу куку функцией $.cookie(“ui_save”), эта функция автоматически определяет какое значение установлено в куке и если это JSON, то она возвращает JSON объект, что в нашем случае и происходит. Далее для каждого квадрата мы проверяем значение и если оно равно нулю то вызываем событие click, которое установит нужное положение квадрата.

	$(document).ready(function(){
		$(".close").toggle(
			function(){
				$(this).prev().slideUp(); //скрываем квадрат
				$(this).html("Открыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение закрыть
				$.setSubCookie("ui_save", class_name, 0);
			},
			function(){
				$(this).prev().slideDown(); //разворачиваем квадрат
				$(this).html("Закрыть");
				var class_name = $(this).prev().attr("class");
//устанавливаем значение куки для конкретного квадрата в положение открыт
				$.setSubCookie("ui_save", class_name, 1);
			}
		);

		//Устанавливаем необходимую позицию интерфейса
		var ck = $.cookie("ui_save");
		for(key in ck){
			if(ck[key] == 0){
//вызываем событие "закрыть"
				$("." + key).next().trigger('click');
			}
		}

	});

То что получилось можно посмотреть здесь, после обновления страницы позиция интерфейса (закрытые, открытые квадраты) сохраняется.

“Интересные вещи происходят! сегодня мы объединяем силы с проектами jQTouch и Raphaël, а также меняем имя домена проекта с extjs.com на sencha.com. Эти проекты лидируют в своих областях и мы рады видеть в своих рядах их создателей Девида Канеду и Дмитрия Барановского. Мы считаем, что это сотрудничество приведет к впечатляющим результатам. … Sencha эт0 новое название нашей компании, а также разновидность япоского зеленого чая (Так вот он какой стратегический напиток ExtJS разработчика ?!).

Развитие Ext JS, Ext GWT, Designer, Direct и остального будет продолжаться, думаем только над переименованием Ext JS Designer на Sencha Designer. Одним из преимуществ переименования для нас является то, что мы разделяем названия компании и продукта.

Проекты jQTouch и Raphaël так и останутся под лицензией MIT. Мы создаем Sencha Labs подразделение, которое будет заниматься торговыми марками и авторскими правами всех некоммерческих проектов связанных с Sencha. Мы также рады сообщить, что Джонатан Старк известный разработчик мобильных приложений и автор двух книг под редакцией O’Reilly станет руководителем jQTouch (Добро пожаловать на борт Джонатан)” – вот такое сообщение получили зарегистрированные на форуме Ext JS, позже оно было опубликовано и на сайте.

Что можно ожидать от объединения ? Я думаю только хороших новых результатов. jQTouch это jQuery плагин для разработки под мобильные девайсы типа iPhone, iPad и прочие «forward-thinking» девайсы. Как поможет эта библиотека в развитии Ext JS пока соевершенно не ясно. А Raphaël это крутая штука для разработки векторной графики под веб. Подключение этого проекта позволит модифицировать компоненты для построение графиков и диаграмм Ext JS, которые сейчас работают с помощью Flash.

Есть также мнение, что переименование связано с тем, что из компании ушел ее основатель Джек Слокум, или вся команда разработчиков ушла от него в новую компанию Sencha. Вот что пишут про это на сайте: “После интенсивной работы над развитием ExtJS, за последние 18 месяцев Джек стремительно прекратил свое участие. Хоть он и может вернуться на некоторых условиях, мы желаем ему всего наилучшего.”

В любом случае, что же действительно будет дальше покажет время.

В размышлениях об интерактивности задавался мыслью как сделать удобный с точки зрения usability загрузчик файлов.  Плюс подогревал интерес к механизму работы ajax загрузчика в ExtJS. Делая однажды чат и разобравшись в ограничениях браузеров, узнал, что нет возможности отправлять файл по средством объекта xmlhttprequest. Поэтому было непонятно, как ExtJS uploader отправляет файлы, как будто делает это через ajax. Работая над созданием чата, я также ознакомиться с другими ограничениями браузеров, например на количество одновременных запросов к одному домену (ограничены двумя запросами), а также со всевозможными способами обхода этого ограничения. Там же для удобства применялся iframe транспорт, который позволяет отправлять обычные POST запросы через невидимый (0 px на 0 px) iframe. После этого мне сразу стал понятен механизм работы загрузчика файлов в ExtJS.

Решил добавить юзабильности в один из проектов и использовать этот способ для загрузки файлов, благо есть готовый плагин, называющийся AJAX Upload, хотя как я уже писал ajax тут не причем, все реализовано следующим образом:

• Плагин создает невидимый input над элементом, к которому вы привязываете нагрузку. То есть когда вы нажимаете на кнопку, появляется окно со стандартным выбором файла.
• Затем когда вы выбираете файл плагин отправляет форму содержащую input с файлом через iframe.

“Обычно для закачки файлов мы используем file input (<input type=”file” />), его проблематично стилизовать. В современных веб приложениях этот input выглядит устаревшим. Можно конечно использовать для загрузки Flash, но Javascript прекрасно решает эту задачу. Плагин AJAX-Upload позволяет легко загружать несколько файлов без перезагрузки страницы. Он работает во всех браузерах и не требует никаких дополнительных библиотек для работы. К тому же он не затрагивает глобальных namespace‘ов и прекрасно работает вместе с jQuery и Prototype.”

Работать с плагином довольно легко. Достаточно создать любой DOM элемент и привязать к нему плагин. Плагин отправляет файлы в виде обычного POST запроса. Поэтому можно обрабатывать их загрузку на любом серверном языке. На сайте плагина много работающий примеров. В плагине даже реализовано ограничение на расширения загружаемых файлов.

Распространяется плагин свободно под лицензией MIT.

Есть частая проблема, точнее особенность JQuery, о которой часто забывают дизайнеры и разработчики, она заключается в том, что вся анимация на странице при вызове попадает в “стек”. Если у вас на странице есть множество элементов с анимацией, например фотографии в фотогаллерее, то когда пользователь быстро проведет по нескольким фотографиям и перестанет двигать мышью, он будет наблюдать как анимация появляется постепенно на каждом элементе. Наглядно эту проблему можно посмотреть на сайте druckbar, если вы быстро проведете мышкой по четырем панелькам, то будете долго ждать пока в шапке появится соответствующие картинки.

Вы можете решить эту проблему одним из следующих способ:

Использовать метод .stop(). Когда этот метод используется на элементе, он немедленно прекращает его анимацию, если конечно она есть.

$("ol#gallery li").hover(function () {
  $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
  $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Другой способ решить проблему со “стеком” анимации, это использовать плагины, например hoverIntent. Этот плагин делает анимацию доступной только, если пользователь двигает мышью достаточно медленно.

Старайтесь не злоупотреблять с анимацией контента.

Поскольку Javascript функции очень легко реализовать с помощью JQuery, многие увлекаются анимацией  и доставляют этим пользователю немало неудобств. Допустим, удобно использовать JQuery для подгрузки изображений по мере прокрутки текста, это позволяет быстро прогрузить страницу с множество картинок. Но зачем показывать эти изображения при помощи анимации ?! В этом нет никакаго смысла.

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

Итак…

html код банально:

<div class="news_date">2009-07-3</div>

Свойство стилю:
.news_date { color:#0000FF; font-weight:bold;font-size:20px;}

Javascript код

<script>
//Запускаем после загрузки документа
$(document).ready(function(){
//Создаем функцию, которую потом будем запускать "в цикле"
function runIt() {

var x=0;//навсякий случай вводим переменную - показатель, какой именно этап сейчас запущен, хотя вообще-то jQuery ставит всю анимацию "в очередь".
$(".news_date").animate({
opacity: .1
}, 2000, "linear", function(){x=1;} );

if (x=1) {
$(".news_date").animate({
opacity: .9
}, 2000, "linear", function(){x=0;runIt();} );//callback функция, после завершения  анимациии, запустит нашу анимацию еще раз, бесконечный цикл.
}

}

runIt();//запускаем нашу фукцию сразу по загрузке документа

});
</script>

Что мы делаем в функции: animate({opacity: .1}, 2000, “linear”, function(){x=1;} ); Изменяем параметры у класса .news_date, а имено параметр прозрачности, и делаем это в течении 2000 мс (милисекунд).
Вторая функция полностью обратный процесс.

Пример можно посмотреть здесь.
P.S. При желании можно поэкспериментировать еще с такими параметрами:
width:
marginLeft:
fontSize:
borderWidth:

$(document).ready(function(){
$('#tabs div').hide(); // Скрываем все элементы div
$('#tabs div:first').show(); // Показываем только первый элемент div
$('#tabs ul li:first').addClass('active'); // Устанавливаем стиль для первого div в положении активный
$('#tabs ul li a').click(function(){ //Выполняем, если пользователь кликнул на ссылку
$('#tabs ul li').removeClass('active'); // Удаляем активный стиль со всех ссылок
$(this).parent().addClass('active'); //Устанавливаем активный стиль для нажатой ссылки
var currentTab = $(this).attr('href'); // Устанавливаем значение текущей вкладки в соответствии со значением нажатой ссылки
$('#tabs div').hide(); // Скрываем все элементы div
$(currentTab).show(); // Показываем div с id равынм значению текущего tab(вкладки)
return false;
});
});

HTML струтура для вкладок, используется не сортированный список для ссылок навигации и контейнер div для каждой секции. Каждая ссылка связанна по id с конкретным контейнером div.
Собственно сам код HTML.

<div id="tabs">
<ul>
<li><a href="#tab-1">Tab One</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>
<div id="tab-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tab-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tab-3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="tab-4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>
</div>

Ну и css стили для вкладок

#tabs {
font-size: 90%;
margin: 20px 0;
}
#tabs ul {
float: right;
background: #E3FEFA;
width: 600px;
padding-top: 4px;
}
#tabs li {
margin-left: 8px;
list-style: none;
}
* html #tabs li {
display: inline; /* ie6 double float margin bug */
}
#tabs li,
#tabs li a {
float: left;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #0073BF;
font-weight: bold;
}
#tabs ul li.active {
background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
}
#tabs ul li.active a {
background: url(img/nav-left.gif) no-repeat left top;
color: #333333;
}
#tabs div {
background: #CEE1EF;
clear: both;
padding: 20px;
min-height: 200px;
}
#tabs div h3 {
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 1px;

#tabs div p {
line-height: 150%;
}

Пример можно посмотреть здесь.
Либо скачать целиком тут.
Оказывается есть доки по созданию вкладок на сайте JQuery. Надо будет посмотреть.