Я начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже читательу известно про такие инструменты, как PixelPerfect и X-Precise, однако у каждого из них есть свои плюсы и минусы, как и у моего.
Итак, что же особенного в 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");
Картинкой-слоем удобно управлять горячими клавишами — стандартными «w», «a», «s», «d» и стрелками. Так же при нажатии на любую цифру из верхнего ряда устанавливается «шаг» в пикселях равный ее значению. Например: нажали 5 — шаг будет 5px. Скрыть и показать картинку можно комбинацией shift+e.
Управляющая панель умеет закрепляться и открепляться. В открепленном состоянии появляется на экране при наведении курсора на правый верхний угол документа.
Помимо перемещений, картинка-слой умеет центрироваться по нажатию одной кнопки на панели и менять свойство «position» на «fixed» и обратно на «absolute».
Есть небольшое видео, описывающее процесс:
Автор: polyembrion
