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