Для всех неверующих в мощь JQ:
Практически за 5 минут можно сделать свапалку, которая:
Разделяет стиль, данные, представление(html), JS сценарии.
Код, отвечающих за создание представления, может выполнятся как на стороне клиента(как сейчас) так и сервера. На клиенте = экономия ресурсов.
В итоге. Спец по рюшечкам работает с CSS. Спец по верстке с HTML, ну а мы кодим JS и никто ни от кого не зависит.
Этот костяк, очень гибок и масштабируем!
Код страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="goods_nav"></div>
<script>$.getScript('js/build_it.js');</script>
</body>
</html>
Сам скрипт:
$.getScript('js/jquery.xslt.js', function(){
$('#goods_nav').xslt({xmlUrl: 'service/goods.xml', xslUrl: 'service/standard_display.xsl'});
});
и транслятор:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet>
<xsl:template match="/">
<xsl:apply-templates select="box/default"/>
</xsl:template>
<xsl:template match="box/default">
<img src="{.}" id="goods_img" />
</xsl:template>
<xsl:template match="/">
<xsl:apply-templates select="box/img"/>
</xsl:template>
<xsl:template match="box/img">
<img src="{@icn}" onclick="$('#goods_img').attr('src', '{.}')" onMouseOver="$(this).attr('style','cursor:pointer');"/>
</xsl:template>
</xsl:stylesheet>
вот сборка:
http://fileua.com/download.php?file=...ca7e78d8db0a9e
JS из транслятора можно вынести, для инкапсуляции или заменить на хэндл, но это ДЕМКА и тут главное наглядность.
goods.xml в рабочем коде может быть ...goods.xml?type=box - выбирается модель при переходе на страницку выбора цвета. Естественно goods.xml может содержать куда больше информации: рейтинги, цены, описание и тп. и тд. И всё это можно добавить в любой момент. Так же можо полностью изменить внешний вид страницы не трогая данные через display.xsl?type= то же на любой стадии.
ЗЫ. Я не учавствую в конкурсе
