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

в 16:52, , рубрики: css, html, jquery, Веб-разработка, верстка, метки: , , ,

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

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

image

  • Все в одном файле. Вы подключаете 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");

Сайт и демо
Отдельно демо

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

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

Автор: polyembrion

Поделиться

* - обязательные к заполнению поля