07.03.2010, 17:54
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
В представлении кнопка говорит: "я кнопка для переключения цвета" и всё. Как оно будет переключатся не имеет значения. Нужно вести реестр элементов интерфейса, саму механику можно менят отдельно. А это значет, что дизайнер работает отдельно и его не волнуют JS реализации. Если будут добавлены новые эллементы, нужно не переделывать всё, а просто добавить обработчиков. Не обязательно всю страницу в одном файле хранить. Лучше побить на модули по назначению (а не по располажению) скрипты тоже должны быть обернуты в стиле ООП. Тут главное не полная изоляция а то, что дизайнер занимется своим, а программист - своим.
Тем более xsl и xml это не файл, а информация сформированная сервисом в ответ на запрос и ее легко компоновать.
Последний раз редактировалось JAre, 07.03.2010 в 17:57.
|
|
07.03.2010, 18:03
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от JAre
|
|
В представлении кнопка говорит: "я кнопка для переключения цвета" и всё.
|
Ну разумеется можно не пользоваться селекторами и помечать нужные элементы классами (как, собственно, и должно быть), но зачем тогда jQuery? Вся концепция jQuery построена вокруг селекторов. |
|
07.03.2010, 18:38
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
|
В jQuery полно плагинов и эллементов интерфейса, которые можно использовать как "черный ящик" и разнообразных AJAX-ов. При желании можно найти плагин на любой случай жизни. Всё с более менее стандартным интерфейсом, всё компактно упаковано и лишнее можно просто не подключать. Конечно, толк от jQuery как от средства путишествий по ДОМ меньше, если всё динамично, но такие путишествия не особо то и нужны так как документ строит XSLT из блоков, а он сам имеет всю необходимую логику + он может даже скрипт построить и привести в соотвецтвие маркеры в JS селекторах и HTML. В документе будет только то, что необходимо в данный момент. CSS то же не очень гибок, но и его можно сделать таковым если строить через XSLT - хорошо для разрешения неоднозначностей и других конфликтов. Гугол продвигает JSON тут то же ест шаблоны "google-jstemplate" Видимо, экономичнее и читабельней.
Последний раз редактировалось JAre, 07.03.2010 в 19:43.
|
|
07.03.2010, 19:54
|
 |
Аспирант
|
|
Регистрация: 28.02.2010
Сообщений: 74
|
|
|
|
|
07.03.2010, 21:24
|
 |
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
JAre,
В моем лексиконе есть такое понятие "шаблонизаторные уроды", я называю таким понятием сайты или системы главным достоинством которых их создатели считают то, что они построены на XSLT.
ps: И да я если чё за JSON 
и ещё у Вас jquery головного мозга, а на этом сайте есть раздел для обсуждения jquery, не хотите проследовать туда?
|
|
07.03.2010, 22:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 29.06.2009
Сообщений: 111
|
|
Если вам не нравятся шаблоны, значит, вы не умеете их готовить 
Во всяком случае это не цель, а средство. В недалеком будушем шаблоны будут повсемесны и это неизбежно. Ты или на борту или за бортом... Время покажет.
PS. Ваша тема ваши правила. |
|
07.03.2010, 22:51
|
|
Интересующийся
|
|
Регистрация: 05.03.2010
Сообщений: 16
|
|
Ну вы маниаки
Классный форум! Здорово, что я его нашел!  |
|
07.03.2010, 22:59
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от JAre
|
Если вам не нравятся шаблоны, значит, вы не умеете их готовить
Во всяком случае это не цель, а средство. В недалеком будушем шаблоны будут повсемесны и это неизбежно. Ты или на борту или за бортом... Время покажет.
|
Это у Вас время покажет, у меня оно уже показало.
Пока не перестанете думать стереотипами так и будет казаться что есть борта или грани или линии или еще чего-нибудь. |
|
10.03.2010, 04:55
|
|
Интересующийся
|
|
Регистрация: 05.03.2010
Сообщений: 16
|
|
Благодаря товарищу Octane все получилось.
Вот здесь все видно http://vinylroom.ru/index.php?productID=21
Но теперь встал перед другой проблемой:
Как сделать фокусировку на элементы <options> в контейнере <select> при клике по цветным иконкам? |
|
10.03.2010, 11:58
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
А зачем дублировать навигацию? Там <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 не всегда можно будет увидеть во время загрузки.
Последний раз редактировалось Octane, 10.03.2010 в 12:02.
|
|
|
|
