onclick в отдельном js-файле.

[Bolmazov]

Здравствуйте.

Заранее извинюсь за возможную простоту вопроса, так как JS, XML и XSL Я изучаю лишь месяц. К тому же Я длительное время пытался сам решить эту ?задачку? и поискать решения в Интернете, не нашел.

Итак:

У Меня есть XML файл. Он обрабатывается XSL.

Вот пример фрагмента XML:

?
<document>
<node class='term'><text>1_some data</text></node>
<node class='psevdo'><text> 2_some data </text>
<node class='psevdo'><text>2.1_ some data </text>
<node class='term'><text>2.1.1_ some data </text></node>
</node>
<node class='term'><text> 2.2_some data </text></node>
</node>
<node class='psevdo'><text> 3_some data </text>
<node class='term'><text>3.1_ some data </text></node>
</node>
<node class='term'><text>4_some data </text></node>
</document>

В XLS написан такой фрагмент:

?
<xsl:teamplate match=?node?>
<xsl:choose>
 <xsl:when test=?@class=?psevdo??>
 <div name=?node? type=?psevdo? class=?psevdo?>
 <xsl:value-of select=?text?/>
 <xsl:apply-templates select=?node?/>
 </div>
 </xsl:when>
<xsl:when test=?@class=?term??>
 <div name=?node? type=?term?class=?term?>
 <xsl:value-of select=?.?/>
 <xsl:apply-templates select=?node?/>
 </div>
 </xsl:when>
</xsl:choose>
</xsl:teamplate>
?.

Я хотел бы написать отдельный js-файл, который бы описывал свойства элементов, у которых значение атрибута name=?node?. В частности прописать его повидение на onclick (при клике свойство данного элемента visibility="visible")

Подскажите, каким должен быть js-файл?

[vasa_c]

Получить все дивы с помощью document.getElementsByTagName(), перебрать в цикле, проверяя атрибут "name". Соответствующим элементам назначить нужные обработчики.

Какие конкретные проблемы?

[Yarik Voronov]

  Bolmazov said:

Подскажите, каким должен быть js-файл?

Встречный ворос: "Что получается после XLST трансформации?"

НТМL код. Собсвенно надо что бы было на выходе примерно так, например:

<div name="node" type="psevdo" class="psevdo" onclick="changeVisibility(this)"></div>
<script language="javascript" type="text/javascript">
 function changeVisibility(elem) {
 if (elem.style.visibility=="visible") {
 elem.style.visibility="hidden";
 }else{
 elem.style.visibility="visible"; //ессно дело не сработает, так как элемент скрыт
 }
 }
</script>

Но это простейший выриант. и имеет свои баги (при первом просмотре у дива нет инлайн стиля со свойством visibility). потому решать изменение свойств надо через работу с именами CSS классов, на мой взгляд. когда-то на этом форуме были эти посты

[Bolmazov]

too vasa_c: & Yarik Voronov

Проблема в том, что Я не знаю как так написать отдельный JS, чтобы XLS не содержал кода подобного этому:

<div name="node" type="psevdo" class="psevdo" onclick="changeVisibility(this)">

Причина в том, что Я хочу (а точнее Мой руководитель по УИРу), что бы свойства, которыми Я наделю элементы, не зависели от того что это конкретно за элемент. Значение должно иметь лишь то, что значение у данного эл-та name=?node?.

Как такой js-файл написать?

[AKS]

  Bolmazov said:

Причина в том, что Я хочу (а точнее Мой руководитель по УИРу), что бы свойства, которыми Я наделю элементы, не зависели от того что это конкретно за элемент. Значение должно иметь лишь то, что значение у данного эл-та name=?node?.

А могут ли любые элементы иметь атрибут name (или type, как у Вас в шаблоне)?

  Bolmazov said:

Как такой js-файл написать?

Написать такой файл несложно. Это может быть буквально пара-тройка функций. Одна из них, выполняемая в момент события onload объекта window, могла бы "собрать" все элементы, к примеру, в имени класса которых есть слово node, и присвоить им обработчик события onclick (это уже вторая функция)...

[Bolmazov]

to AKS

Ваша идея Мне нравится. Возможно это то, что как раз нужно. Только вот можно Вас попросить приблизительный код "второй функции" набросать. Это та где нужно присвоить обработчик события onclick.

Отвечая на Ваш вопрос: В данном случае атрибут name="node" будут иметь заведомо только div'ы. Однако это сути не меняет. Важна идея, сама возможность присвоения name="node" любому элементу.

[Yarik Voronov]

  Bolmazov said:

Проблема в том, что Я не знаю как так написать отдельный JS, чтобы XLS не содержал кода подобного этому:

Учись. "Нельзя пройти свой путь чужими ногами"

  Bolmazov said:

Причина в том, что Я хочу (а точнее Мой руководитель по УИРу), что бы свойства, которыми Я наделю элементы, не зависели от того что это конкретно за элемент. Значение должно иметь лишь то, что значение у данного эл-та name=?node?.Как такой js-файл написать?

Задача:

В результате XSL трансформации из исходного XML файла должен получиться XHTML документ,

где у всех элементов с атрибутами name="node" должен быть например белый цвет текста

Движком XSLT будет Mozilla Firefox 2.0.0.8

Список источников:

Something about XML

XSL Transformations (XSLT) Version 2.0

Wikipedia::XSLT

CSS::5.8 Attribute selectors

Решение

Исходный XML(1.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="./1.xsl"?>
<document>
	<node class='term'>
		<text>1_some data</text>
	</node>
	<node class='psevdo'>
		<text>2_some data</text>
		<node class='psevdo'>
			<text>2.1_ some data</text>
			<node class='term'>
				<text>2.1.1_ some data</text>
			</node>
		</node>
		<node class='term'>
			<text>2.2_some data</text>
		</node>
	</node>
	<test class='psevdo'>
		<text>3_some data</text>
		<node class='term'>
			<text>3.1_ some data</text>
		</node>
	</test>
	<node class='term'>
		<text>4_some data</text>
	</node>
</document>

XSL шаблон(1.xsl)

<xsl:stylesheet version="1.0" 
		xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
		xmlns="http://www.w3.org/1999/xhtml">
	<xsl:output method="xml" indent="yes"
		doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" 
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>


   <xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
			<head>
				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				<title>test1</title>
				<style type="text/css">
					body	{width:50%;}
					p		  {font-size:18px; color:red; background-color:red; margin:10px; padding: 5px;}
					div	   {padding:5px; color:red; background-color:silver; margin:10px;}
				   *[name='node'] {color:white;} /*IE отдыхает*/
				</style>
				<script language="javascript" type="text/javascript">
					  function doSomeActions(e) {
						  elem= e.target; //IE нервно курит
						  with (elem.style) {
							  backgroundColor="blue";
							  color="red";
						  }   
						  return e.preventDefault(); //IE нервно курит
					   }
				 </script>
			</head>
			<body>
				<xsl:apply-templates/>
			</body>
		</html>
	</xsl:template>

	<xsl:template match="test">
	<p name="node"  type="psevdo" class="psevdo">
		<xsl:value-of select="text"/>
		<xsl:apply-templates select="node"/>
	</p>
	</xsl:template>

	<xsl:template match="node">
	<xsl:choose>
	<xsl:when test="@class='psevdo'">
		<div name="node"  type="psevdo" class="psevdo" onclick="doSomeActions(event)">
			<xsl:value-of select="text"/>
			<xsl:apply-templates select="node"/>
		</div>
	</xsl:when>
	<xsl:when test="@class='term'">
		<div name="node" type="term" class="term">
			<xsl:value-of select="."/>
			<xsl:apply-templates select="node"/>
		</div>
	</xsl:when>
	</xsl:choose>
	</xsl:template>
</xsl:stylesheet>

  Quote

как так написать отдельный JS

написать руками, думая головой, внедририть в XHTML -> http://htmlbook.ru/html/script.html

  Bolmazov said:

Только вот можно Вас попросить приблизительный код "второй функции" набросать. Это та где нужно присвоить обработчик события onclick.

Попросить то можно... Только исходным кодом ответят наврядли.

см Java Script методы: attachEvent(), addEventListener(), getAtribute();

[Bolmazov]

to Yarik Voronov, AKS, vasa_c.

Искренне благодарю Вас за помощь и советы. Они Мне помогли . Конечно же Я согласен с тем, что ?Нельзя пройти Свой путь чужими ногами?. Я лишь спросил куда идти. ?вот и пойду . Еще раз спасибо.