UMIhelp

Разработка сайта на UMI.CMS => Шаблоны XSLT => Тема начата: diii3 от 18 Марта 2012, 00:18:38

Название: jQuery код не работает
Отправлено: diii3 от 18 Марта 2012, 00:18:38
Здравствуйте! Подскажите, пожалуйста, как можно сделать так чтобы код описанный ниже не вызывал ошибку в работе шаблона и заработал, если это конечно возможно:

<a title="Bookmark" class="bookmark" href="" onclick="jQuery('html, body').animate( { scrollTop: 0 }, 'slow' );"><img border="0" title="" alt="" src="/images/top.gif" /></a>

Ссылка должна возвращать пользователя вверх страницы.
Название: Re:jQuery код не работает
Отправлено: BaceH от 18 Марта 2012, 02:38:53
какую ошибку вызывает данный код? в каком месте шаблона он вставлен? Подключен ли скрипт jQuery и как подключен?
Название: Re:jQuery код не работает
Отправлено: diii3 от 18 Марта 2012, 13:57:28
Спасибо! Разобрался!
Название: Re:jQuery код не работает
Отправлено: admin от 18 Марта 2012, 14:23:47
а для тех, кто не разобрался отвечу)

дело в том что вставляя код js внутрь атрибута onclick, тега a вы нарушаете синтаксис используя символ { или }, так как эти символы зарезервированы для вывода значения узла, переменной, параметра или атрибута указанного внутри фигурных скобок.

То есть вам надо убрать код
jQuery('html, body').animate( { scrollTop: 0 }, 'slow' );

из тега a

это можно сделать следующими способами:

1. использовать xsl конструкцию attribute передав значение для атрибута onclick через него, экранировав его через <![CDATA[...]]>
Пример:
<a title="Bookmark" class="bookmark" href="">
<xsl:attribute name="onclick"><![CDATA[jQuery('html, body').animate( { scrollTop: 0 }, 'slow' );]]></xsl:attribute >
<img border="0" title="" alt="" src="/images/top.gif" />
</a>

2. вынести этот код в отдельный файл, прописав там обработчик события на нажатие по данной ссылке
Пример:
код нашей ссылки остается почти таким же, только без атрибута onclick
<a title="Bookmark" class="bookmark" href="">
<img border="0" title="" alt="" src="/images/top.gif" />
</a>
Далее, мы создаем файл /js/dev/start.js (назвать и положить его можно как и куда угодно, это не принципиально, главное не забудьте подключить этот файл в вашем шаблоне). Код данного файла:
$(document).ready(function() {	
jQuery('.bookmark').click(function(){
jQuery('html, body').animate( { scrollTop: 0 }, 'slow' );
})
});

P.S. и мой совет, добавь в конце кода js которым ты обрабатываешь нажатие на ссылку return false;
jQuery('html, body').animate( { scrollTop: 0 }, 'slow' ); return false;
, а то помимо скроллинга страницы вверх будет происходить еще  и перезагрузка страницы.
Название: Re:jQuery код не работает
Отправлено: diii3 от 18 Марта 2012, 14:56:33
Да, спасибо, теперь все как надо!