| why.not? | 07.03.2010 19:54 |
Если смеха ради:
Вот Хайтэк вариант: Запрашиваем у сервера данные каким-то Google Data Protocol - экономия трафика! Строим страницу jQuery XSLT - расширяемость, стандартизация, гибкость, кеширование и экономия серверных мощностей! PS. jQuery святое. Не нужно парится со спецификой браузеров, код гораздо понятней и компактней. Это вообще стандарт. |
Цитата:
|
Цитата:
|
Нужно иметь данные о поверхности объекта (как материал на него ложится)
Нужно иметь сам материал в чистой форме. Нужно выполнить это наложение. То есть нужна трёхмерная модель и текстура. Наложение это вообще отдельная история. Тут нужно делать на флеше, все остальные варианты будут не переносимы. |
JAre, про Canvas не слышали?
|
А нет, тут, похоже, не учтено наложение. Это практически тоже самое, что я предлагал с выризками. С теми же минусами. И тоже нужна и модель и материалы. Но смотрится хуже чем на 3-Д
|
Чета я не понял о каких трехмерных моделях идет речь?
В ссылке что я дал все плоское. |
Цитата:
|
Цитата:
|
Цитата:
|
Если перегонять то уж пробще 3-Д с рюшечками(на флеше) сделать чем такое.
|
Цитата:
|
Тем более, посмотри какие браузеры его, этот твой канвас, поддерживают. Нафига такое нужно в магазине?
|
Цитата:
|
Octane
Ты еще SVG предложи :) |
Цитата:
Цитата:
Цитата:
рекомендую заглянуть: http://www.chromeexperiments.com/ http://raphaeljs.com/ |
Цитата:
|
Цитата:
|
Octane
Нент ну вот зачем все эти танцы с бубном вокруг непереносимых фишек и кто этим будет заниматься? Я говорю о том, что во Флеш сделать проще так как: 1. Это еще и IDE 2. Он установлен почти у всех = переносимость. 3. Есть стандартные методы отображения 3D обънектов. Они медлянные, но всёравно быстрее чем на JS самопылы делать. |
Цитата:
|
Цитата:
Цитата:
|
Цитата:
надо завязывать. А то это уже полный оффтоп. У автора нет даже доступа к фоткам, какие тут хайтыки могут быть? Нужно просто наладить подгрузку и отображение с возможностью расширения. |
Нечего тут налаживать, овчинка выделки не стоит.
|
Цитата:
Цитата:
|
Легко и перенасимо, да еще и можно будет так же легко загружать данные как во flash? А примеры есть? Вот мой пример http://wow.incgamers.com/blog/commen...aracter-feeds/ Есть что-то такого масштаба на JS?
Цитата:
Я подключил JQ в шапку один раз и больше не парюсь. Расширяй сколько хочеш, нужно - добавлю еще и палгин какой. + повторное использование. И вообще нужно читать внимательно. Я привел списоr приемуществ Флеша для векторного 2Д и тем более 3Д (по крайней мер до webGL) В первую очередь это развитое IDE и переносимость. Это первое на, что приходится обратить внимание при решении даже мелких задач. PS. Прошено же, по теме... Опять понесло блин. |
Octane,
Круть! Попрубую это реализовать! Спасибо, в ЛС кинь номер кошелька или телефона, положу обещанные 500р:) |
Для всех неверующих в мощь 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= то же на любой стадии. ЗЫ. Я не учавствую в конкурсе ;) |
Цитата:
|
Kolyaj
Окей.
$.getScript('js/jquery.xslt.js', function(){
$('#goods_nav').xslt({xmlUrl: 'service/goods.xml',
xslUrl: 'service/standard_display.xsl',
callback: function() {
$.ajax({ url: "js/standard_display.js",
dataType: "script",
cache: true
});
}
});
});
<?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 name="goods_nav_btn" src="{@icn}" g_img="{.}" />
</xsl:template>
</xsl:stylesheet>
$('[name=goods_nav_btn]').click(function(){
$('#goods_img').attr('src', $(this).attr('g_img'));
});
|
JAre,
и что это доказывает? |
В представлении кнопка говорит: "я кнопка для переключения цвета" и всё. Как оно будет переключатся не имеет значения. Нужно вести реестр элементов интерфейса, саму механику можно менят отдельно. А это значет, что дизайнер работает отдельно и его не волнуют JS реализации. Если будут добавлены новые эллементы, нужно не переделывать всё, а просто добавить обработчиков. Не обязательно всю страницу в одном файле хранить. Лучше побить на модули по назначению (а не по располажению) скрипты тоже должны быть обернуты в стиле ООП. Тут главное не полная изоляция а то, что дизайнер занимется своим, а программист - своим.
Тем более xsl и xml это не файл, а информация сформированная сервисом в ответ на запрос и ее легко компоновать. |
Цитата:
|
В jQuery полно плагинов и эллементов интерфейса, которые можно использовать как "черный ящик" и разнообразных AJAX-ов. При желании можно найти плагин на любой случай жизни. Всё с более менее стандартным интерфейсом, всё компактно упаковано и лишнее можно просто не подключать. Конечно, толк от jQuery как от средства путишествий по ДОМ меньше, если всё динамично, но такие путишествия не особо то и нужны так как документ строит XSLT из блоков, а он сам имеет всю необходимую логику + он может даже скрипт построить и привести в соотвецтвие маркеры в JS селекторах и HTML. В документе будет только то, что необходимо в данный момент. CSS то же не очень гибок, но и его можно сделать таковым если строить через XSLT - хорошо для разрешения неоднозначностей и других конфликтов. Гугол продвигает JSON тут то же ест шаблоны "google-jstemplate" Видимо, экономичнее и читабельней.
|
|
JAre,
В моем лексиконе есть такое понятие "шаблонизаторные уроды", я называю таким понятием сайты или системы главным достоинством которых их создатели считают то, что они построены на XSLT. ps: И да я если чё за JSON :) и ещё у Вас jquery головного мозга, а на этом сайте есть раздел для обсуждения jquery, не хотите проследовать туда? |
Если вам не нравятся шаблоны, значит, вы не умеете их готовить ;)
Во всяком случае это не цель, а средство. В недалеком будушем шаблоны будут повсемесны и это неизбежно. Ты или на борту или за бортом... Время покажет. PS. Ваша тема ваши правила. |
Ну вы маниаки:)
Классный форум! Здорово, что я его нашел! :dance: |
Цитата:
Пока не перестанете думать стереотипами так и будет казаться что есть борта или грани или линии или еще чего-нибудь. |
Благодаря товарищу Octane все получилось.
Вот здесь все видно http://vinylroom.ru/index.php?productID=21 Но теперь встал перед другой проблемой: Как сделать фокусировку на элементы <options> в контейнере <select> при клике по цветным иконкам? |
А зачем дублировать навигацию? Там <select> вообще не нужен. Текст каждой ссылки содержит название цвета, которое можно выводить куда угодно, осталось дописать изменение value какого-нибудь <input type="hidden">, чтобы отправить ваш цветовой индекс на сервер. Ну а сами индексы цветов хранить, например, в выдуманном атрибуте color элемента <a>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
.item .color {
display: block;
width: 32px;
height: 32px;
margin: 10px;
text-indent: -9999px;
cursor: pointer;
border: 1px solid #000;
}
.brown {
background: #930;
}
.lilac {
background: #606;
}
.item .photo {
background: url(http://javascript.ru/forum/images/ca_serenity/misc/progress.gif) no-repeat center center;
}
</style>
<form action="" class="item">
Выбран цвет: <span class="color-name">Фиолетовый</span>
<input class="color-index" type="text" name="option_select_2" value="0:1" /> <!-- заменить тип на hidden -->
<img class="photo" src="http://s60.radikal.ru/i169/1003/ce/51d329b4ca7c.jpg" alt="" width="278px" height="400px" />
<a href="http://s004.radikal.ru/i206/1003/17/9edf0ad0c180.jpg" class="color brown" color="0:0">Коричневый</a>
<a href="http://s60.radikal.ru/i169/1003/ce/51d329b4ca7c.jpg" class="color lilac" color="0:1">Фиолетовый</a>
</form>
<script type="text/javascript">
function hasClass(element, className) {
return (" " + element.className + " ").indexOf(" " + className + " ") != -1;
}
function findClass(className, root) {
root = root || document;
if (root.getElementsByClassName) {
return root.getElementsByClassName(className);
}
if (root.querySelectorAll) {
return root.querySelectorAll("." + className);
}
var elements = [], allElements = root.getElementsByTagName("*"), length = allElements.length, i = -1, j = 0;
while (++i < length) {
if (hasClass(allElements[i], className)) {
elements[j++] = allElements[i];
}
}
return elements;
}
(function () {
function switchImage(node, src) {
node.src = "адрес однопиксельного прозрачного gif";
node.src = src;
}
function switchColorName(node, colorName) {
node.innerHTML = colorName;
}
function switchColorIndex(node, colorIndex) {
node.value = colorIndex;
}
var items = findClass("item"), i = items.length;
while (i--) {
items[i].onclick = function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (hasClass(target, "color")) {
switchImage(findClass("photo", this)[0], target.href);
switchColorName(findClass("color-name", this)[0], target.innerText || target.textContent);
switchColorIndex(findClass("color-index", this)[0], target.getAttribute("color"));
return false;
}
};
}
}());
</script>
</body>
</html>
Вы на сайте забыли добавить однопиксельный прозрачный gif: node.src = "адрес однопиксельного прозрачного gif"; Без него progress.gif не всегда можно будет увидеть во время загрузки. |
| Часовой пояс GMT +3, время: 22:49. |