Легкий список

Давно я не писал ничего полезного, от части потому что не было реальных заданий от части потому, что последние время их было слишком много. А сегодня я расскажу как сделать красивый и «легкий» список.

Для списка я использовал jQueryUI, а вы можете написать все стили руками, если есть желание. Итак сначала пример, а потом разбор кода.

  • Один
  • Два
  • Три
  • Четыре
  • Пять

Итак в разметке ничего страшного нет, это простой список и две кнопочки: «редактировать», «удалить».


<div class="container ui-widget ui-widget-content ui-corner-all">
	<ul id="list">
		<li value="1">Один</li>
		<li value="2">Два</li>
		<li value="3">Три</li>
		<li value="4">Четыре</li>
		<li value="5">Пять</li>
	</ul>
	<div class="controls">
		<span class="ui-state-default ui-corner-all" title=""><span class="ui-icon ui-icon-pencil"></span></span>
		<span class="ui-state-default ui-corner-all" title=""><span class="ui-icon ui-icon-close"></span></span>
	</div>
</div>

.list-container {
    width: 300px;
    position: relative;
}
#list {
    padding: 10px;
}
#list li {
    line-height: 18px;
    list-style: none outside none;
    padding: 1px;
    border: 1px solid transparent;
}
.controls {
    cursor: pointer;
    display: none;
    position: absolute;
    right: 10px;
    font-size: 1px;
    padding: 2px;
}
.controls span {
    display: block;
    float: left;
    width: 18px;
    height: 18px;
}

CSS тоже достаточно просто, кроме того что я даю контейнеру position:relative, это позволяет задать контролам right: 10px и не высчитывать положение по левой стороне, более того это еще удобно тем что в таком случаи контролов может быть разное количество для разных элементов списка.

А теперь самое интересное.


jQuery(function ($) {

	function doSomething() {
		alert("I'm dummy function");
	}

	$("#list")
		.on("mouseenter", "li", function () {
			var self = $(this);
			self.addClass("ui-state-hover").siblings(".ui-state-hover").removeClass("ui-state-hover");
			self.parent().siblings(".controls").show().css({top: self.position().top});
		})
		.on("click", "li", null, function () {
			var self = $(this);
			doSomething(self.attr("value"));
		})
		.parent()
		.on("mouseleave", function () {
			var self = $(this);
			self.find("li.ui-state-hover").removeClass("ui-state-hover");
			self.find(".controls").hide();
		})
		.find(".ui-state-default")
		.on("mouseenter", function () {
			$(this).addClass("ui-state-hover");
		})
		.on("mouseleave", function () {
			$(this).removeClass("ui-state-hover");
		})
		.end()
		.find(".ui-icon-close")
		.on("click", function () {
			doSomething();
		})
		.end()
		.find(".ui-icon-pencil")
		.on("click", function () {
			doSomething();
		});
});

Сначала делегируем списку событие появления курсора над конкретным элементом, это дает возможность подсветить его (элемент), и пододвинуть к нему контролы. mouseover тут использовать нельзя потому что при наведении на котнролы они получат mouseover и пропадет подсветка на элементе и получиться мигание. По этой же причине mouseleave повешен не на список а на его родителя.

Дальше все предельно просто — навешены события на раскрашивание и подсвечивание контролов.

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

3 Комментарии “Легкий список

  1. в коде этой страницы есть console не убранный :)

  2. что не позволяет ему нормально работать, и имел ввиду

Комментарии закрыты