Еще один jQuery плагин для верстки «пиксель в пиксель»

Я начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже читательу известно про такие инструменты, как PixelPerfect ^[1] и X-Precise ^[2], однако у каждого из них есть свои плюсы и минусы, как и у моего.

Итак, что же особенного в pixLayout?

• Все в одном файле. Вы подключаете jQuery, после него файл плагина, запускаете его и все работает. Стили и html уже включены.
• Кроссбраузерность. pixLayout работает в браузерах chrome 5+, opera 10+, firefox 3.6+, IE 7+ (с небольшими глюками, но все же работает), а так же на всех версиях jQuery начиная с 1.3.2
• Функциональность. В плагине предусмотрено достаточно параметров для удобной настройки и последующей верстки.

Как установить и настроить?

Подключаем jQuery любой удобной версии, начиная с 1.3.2, подключаем pixLayout и прописываем ему путь до картинки-макета, которую мы предварительно создали.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pixlayout.js"></script>
<script type="text/javascript">
	$(function(){
		$.pixlayout("/path_to_picture/picture.ext");
	});
</script>

Для более тонкой настройки передаем объект и вторым параметром указываем контекст.

$.pixlayout({
		src: "/img/layout.jpg",
		opacity: 0.8,
		top: 50,
		center: true,
		clip: true,
		show: true
	}, ".wrapper");

Сайт и демо ^[3]
Отдельно демо ^[4]

Картинкой-слоем удобно управлять горячими клавишами — стандартными «w», «a», «s», «d» и стрелками. Так же при нажатии на любую цифру из верхнего ряда устанавливается «шаг» в пикселях равный ее значению. Например: нажали 5 — шаг будет 5px. Скрыть и показать картинку можно комбинацией shift+e.
Управляющая панель умеет закрепляться и открепляться. В открепленном состоянии появляется на экране при наведении курсора на правый верхний угол документа.
Помимо перемещений, картинка-слой умеет центрироваться по нажатию одной кнопки на панели и менять свойство «position» на «fixed» и обратно на «absolute».

Есть небольшое видео, описывающее процесс:

Автор: polyembrion