Еще один 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».

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 16

    +2
    Очень порадовала музычка! 8-bit OldScool
    +2
    Я извиняюсь за возможно глупый вопрос, но какие варианты использования?
      +6
      Используем так: дизайнер рисует макет, например в psd, который нужно сверстать. Мы сохраняем данный макет в какой-нибудь формат попроще (например jpg или png) кладем рядом там где верстаем, подключаем jquery и наш плагин, и прописываем нужные параметры. После этого мы можем как бы наложить эту полупрозрачную картинку на нашу верстку, сравнить что куда и насколько уехало, если нужно подправить это прямо в developer tools (в случае с chrome) или в аналоге (для других браузеров) и сохранить изменения уже на самом верстаемом сайте. Так мы максимально упрощаем себе жизнь при требовании верстать «пиксель в пиксель» с макетом.
        +1
        Понятно. Спасибо.
      +2
      Спасибо! Думаю такое точно сможет пригодиться.
      Было бы не плохо менять значения параметров с помощью скрола.
        –2
        PerfectPixel — расширение для Chrome. Не нужно добавлять скрипт на страницу.
          0
          К сожалению верстку нужно сверять не только в Chrome и Firefox
            0
            к тому же на него есть ссылка в статье
            0
            Один вопрос: если у меня флеш на странице, я смогу по нему кликнуть при включенном оверлей слое? Нужен плагин для рисования, использую пиксельпёрфект, но скрывать-показывать слой надоело…
              0
              Не совсем понял, что имеется ввиду. Нужно кликать по флэшу, но чтобы оверлэй показывался сверху флэша? Такого, насколько мне известно, не бывает.
              А вообще есть у флэша интересный параметр, задающий его поведение в данном случае, называется wmode. Тут описан подробно.
                0
                https://developer.mozilla.org/en-US/docs/CSS/pointer-events — сему уже несколько лет… Сделайте чекбокс в своей менюшке на сей параметр + чекбок на фикированное позиционирование, аль только фиксированное позиционирование и все будет работать нормально.
                  0
                  Действительно отличная вещь, обязательно добавлю. Кнопка, меняющая позиционирование на фиксированное и обратно на абсолютное — присутствует в панели и называется «fixed». Я об этом писал в посте. Так же можно изначально указать позиционирование, передав в объект свойство «fixed» с значением true или false.
                    0
                    Оу, про «fixed» как-то проморгал. Быть может имеет смысл сделать его более наглдным и привычным, ибо false / true как-то сливаются с остальными значениями.
              0
              Писал в комментариях к X-Precise, что такие вещи лучше подключать в виде букмарка — это не сложно, универсально и не подразумевает включения в проект постороннего кода, который можно потом и забыть удалить. Я для себя сделал X-Precise для подключения через букмаркинг и у него есть удобный переключатель — накладывать картинку поверх вёрстки или под неё. Иначе возникают трудности с инспектированием элементов через firebug с картинкой поверх всей вёрстки.
                +1
                Но у букмарка есть большой минус — его нужно активировать каждый раз после рефреша страницы.

              Only users with full accounts can post comments. Log in, please.