jPutty для вёрстки, плагин под jQuery

Задача

Вот с таким дизайном мне предстояло разработать сайт, главная страница делится на две полосы – тёмную и светлую. Тонкие линии и некоторые ключевые элементы расположены строго по принципу золотого сечения. И тут меня накрыло…

Опять делать простые вещи сложным html+css кодом? Опять каждый браузер будет отображать страницу по-своему? Опять возиться с кроссбраузерностью? Писать хаки?

И почему таких проблем нет в desktop-программировании? Менять размеры элемента по формуле – пожалуйта. Пододвинуть кнопку левее на 17 пикселей – пожалуйста. Устроить принципиально разное расположение элементов в строгой зависимости от размеров окна – нет проблем! И только в html+css с этим могут возникнуть подобные трудности. Однажды я чуть не потерял заказчика, когда затянул с задачей «пододвинуть блок немножечко выше и левее»… мне пришлось основательно переделать всю вёрстку, потому что старая структура на такие перемещения блока рассчитана не была. Труд этот был не оценен, и поделом, ведь в результате я всего лишь пододвинул блок.


Всё, хватит, отныне я решил максимально использовать в вёрстке JavaScript. Да, я знаю что js включен не у всех. Да, я знаю, что сейчас мало кто так делает. По статистике, JavaScript выключен менее чем у 1% пользователей! Много это или мало?

jPutty

Идея была реализована в новом плагине под jQuery. Для тех, у кого выключен JavaScript, реализуем максимально простую вёрстку в подключенном обычном css-стиле (не к максимальной ли простоте стремятся такие пользователи?). Для тех, у кого JavaScript включен, запустится скрипт, реализующий специальное событие:

$(window).readyresize(function(width, height) {
	// using jPutty
});

Событие “readyresize” вызывается один раз по завершению загрузки страницы, и каждый последующий раз при изменении размеров окна браузера.

Подробности на сайте плагина — jputty.ru/getting-started.

Как выглядит решение

Раз — фрагмент html-кода верхней (тёмной) половины страницы.
Каждый элемент – отдельный блок div. Не нужно никаких wrapper-ов, разделительных блоков, и прочих трюков.

<!-- Тёмная (верхняя) сторона сайта -->
 <div id="dark">

	<!-- Sliderman Endegor's Degustation -->
	<div id="DegustationNavigation"></div>
	<div id="Degustation">
	  <img src="./img/Degustation/cognac.png" width="383" height="600" alt="Degustation cognac" />
	  <img src="./img/Degustation/riesling.png" width="383" height="600" alt="Degustation riesling" />
	  <img src="./img/Degustation/bourgogne.png" width="383" height="600" alt="Degustation bourgogne" />
	  <img src="./img/Degustation/bordeaux.png" width="383" height="600" alt="Degustation bordeaux" />
	  <img src="./img/Degustation/champagne.png" width="383" height="600" alt="Degustation champagne" />
	  <img src="./img/Degustation/martini.png" width="383" height="600" alt="Degustation martini" />
	</div>
	<!-- /Sliderman Endegor's Degustation -->

	<div class="delivery_text">Доставка по Украине</div>

	<a href="#">
	  <div class="shop_wine"></div>
	  <div class="shop_wine_text">вино</div>
	</a>
	<a href="#">
	  <div class="shop_cognac"></div>
	  <div class="shop_cognac_text">коньяк</div>
	</a>
	<a href="#">
	  <div class="shop_armagnac"></div>
	  <div class="shop_armagnac_text">арманьяк</div>
	</a>

	<div class="JJB"></div>

	<div class="line"></div>

</div>
<!-- /Тёмная (верхняя) сторона сайта -->

Два — соответствующий фрагмент css-кода.
Для блоков-текстов задаём шрифт, для блоков-картинок задаём фон.

#dark { background-color: #000; color: #f0f0f0; z-index: -10; }

#dark .delivery_text { text-align: right; font-size: 12pt; }
	
#dark .shop_wine { background-image: url(../img/shop/wine.png); }
#dark .shop_wine_text { text-align: center; }
#dark .shop_cognac { background-image: url(../img/shop/cognac.png); }
#dark .shop_cognac_text { text-align: center; }
#dark .shop_armagnac { background-image: url(../img/shop/armagnac.png); }
#dark .shop_armagnac_text { text-align: center; }
	
#dark .JJB { background-image: url("../img/Jean Jacques Brissot.png"); }
	
#dark .line { background-color: #fff; z-index: -10; }

И три! Фрагмент js-кода.
Указываем расположение каждого блока в зависимости от размеров (width и height) браузера.

$(window).readyresize(function(width, height) {

	...

	var dy = (height - 600) / 1.618 + 35;

	$('#dark').putty('xysize', 0, 0, width, height);

	$('#dark #Degustation').putty('xysize', 0, dy - 35 - 1, 383, 600);
	$('#dark #DegustationNavigation').putty('xysize', 0, dy - 35, 20, 600);
	$("#dark #DegustationNavigation a").each(function (i) {
		$(this).putty('xysize', 25, 10 + 25 * i, 11, 11);
	});

	$('#dark .delivery_text').putty('xysize', 0, 5, width - 50, 30);

	$('#dark .shop_wine').putty('xysize', (width - width / 1.618) - 48 / 2, dy, 48, 174);
	$('#dark .shop_wine_text').putty('xysize', (width - width / 1.618) - 100, dy + 174, 200, 36);
	$('#dark .shop_cognac').putty('xysize', (width / 1.618) - 68 / 2, dy + 174 - 139, 68, 139);
	$('#dark .shop_cognac_text').putty('xysize', (width / 1.618) - 100, dy + 174, 200, 36);
	$('#dark .shop_armagnac').putty('xysize', (3*width / 1.618 - width) - 36 / 2, dy + 174 - 172, 36, 172);
	$('#dark .shop_armagnac_text').putty('xysize', (3*width / 1.618 - width) - 100, dy + 174, 200, 36);

	$('#dark .JJB').putty('xysize', 383, height / 1.618 - 76, 768, 76);

	$('#dark .line').putty('xysize', 0, height / 1.618, width, 1);

	...
});

Функция putty() принимает параметры x,y, width и height и задаёт их блоку через свойства css. Таким образом, положение блоков можно задавать динамически, используя все возможности языка JavaScript.

Ссылки и исходники

Сайт плагина jPutty — jputty.ru
Демо: brissot.biz
Исходники демо-сайта: data.brissot.biz/jjb.rar