Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки

День добрый. Сегодня пятый урок из мини-курса по jQuery для дизайнеров. В этом уроке мы немного переделаем всплывающие окна с подсказками, которые мы делали в предыдущем уроке и создадим сворачиваемый список, похожий на список сообщений. Итак приступим.

Всплывающие окна с подсказками 2

Мы немного изменим предыдущий вариант. Сделаем так, чтобы title ссылки являлся подсказкой (он будет помещаться в тег em).

Первая строка будет изменять пустой элемент em на содержимое атрибута title элемента a.

Когда курсор мыши наведен на ссылку, функция сначала получит значение атрибута title, сохранит это значение в переменной hoverText и потом установит значение элемента em в значение переменной hoverText.

$(document).ready(function(){

	$(".menu2 a").append("");

	$(".menu2 a").hover(function() {
	  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
	  var hoverText = $(this).attr("title");
	  $(this).find("em").text(hoverText);
	}, function() {
	  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});

Посмотреть демо

Сворачиваемые списки

Давайте создадим сворачиваемые списки, примерно такие использует Google в панели «Входящие» у Gmail.

$(document).ready(function(){

	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();

	//hide message li after the 5th
	$(".message_list li:gt(4)").hide();


	//toggle message_body
	$(".message_head").click(function(){
	  $(this).next(".message_body").slideToggle(500)
	  return false;
	});

	//collapse all messages
	$(".collpase_all_message").click(function(){
	  $(".message_body").slideUp(500)
	  return false;
	});

	//show all messages
	$(".show_all_message").click(function(){
	  $(this).hide()
	  $(".show_recent_only").show()
	  $(".message_list li:gt(4)").slideDown()
	  return false;
	});

	//show recent messages only
	$(".show_recent_only").click(function(){
	  $(this).hide()
	  $(".show_all_message").show()
	  $(".message_list li:gt(4)").slideUp()
	  return false;
	});

});

Давайте разберем приведенный выше код:
Первая строка: спрятать все div class="message_body" после первого.
Вторая строка: спрятать все li элементы после пятого
Третья строка: когда произошло нажатие на p class="message_head", развернуть (slideToggle) следующий div class="message_body"
Четвертая строка: когда нажата кнопка «свернуть все»a class="collpase_all_message", свернуть (slideUp) все div class="message_body"
Пятая строка: когда произошло нажатие на «показать все»a class="show_all_message", спрятать эту кнопку, показать кнопку «показать только 5» (a class="show_recent_only"), и развернуть все li элементы, которые находятся после пятого.
Шестая строка: когда произошло нажатие на a class="show_recent_only", спрятать ссылку «показать только 5», показать ссылку «показать все» a class="show_all_message", и свернуть все li элементы после пятого.
Посмотреть демо

Решили приобрести диван? Обратите внимание на диваны угловые, которые станут не только украшением вашего дома, но и помогут расслабиться после тяжелого дня.