Каталог статей

Ajax окна как на хелпере  >  прочее




Привет. Наверняка, каждый, кто знает что такое "Хелпер" хотел сделать, как у них, чтобы все ссылки(профили и т.п.) открывались в нужном окне? Администратор не желал давать секрет, но решение было найдено. Вот собственно и оно:

Казалось бы создать аякс
окно просто, new _uWnd и все дела, НО если нам например нужно сделать
чтобы профиль пользователя, ссылка на который стоит в коде $BODY$
открывался в аякс окне?

1. Разберем на примере страницы со списком пользователя.

1) Первое что мы делаем $BODY$ заменяем на: <div class="ajax">$BODY$</div>
2) Дальше перед кодом </body> или после $BODY$ ставим следующий скрипт:





<script type="text/javascript">$('.ajax a').bind('click',function(){new _uWnd('ajax','Загрузка...',800,350,{closeonesc:1,autosize:1,autosizeonimages:1},{xml:false,dataType:'html',url:this.href});$.get(this.href,{},function(data){if(data.search(/<title>(.+)<\/title>/i)) _uWnd.getbyname('ajax').setTitle(RegExp.$1);});return false;})</script>




Теперь окна стоящие внутри кода $BODY$ будут открываться в аякс окне, как тут.

2. Теперь разберём на примере, когда нам нужно сделать чтобы не все ссылки стоящие в коде $BODY$ открывались в аякс окне:

1)
Разберём на примере форума, допустим, в колонке "Обновления", где
"Сообщение от: $USERNAME$" нам нужно сделать чтобы профиль открывался в
аякс окне. Смотрим исходный код и видим что ссылка имеет класс lastPostUserLink.
2) Теперь, когда мы узнали класс, также перед кодом </body> или после $BODY$ ставим следующее:





<script type="text/javascript">$('.lastPostUserLink').bind('click',function(){new _uWnd('ajax','Загрузка...',800,350,{closeonesc:1,autosize:1,autosizeonimages:1},{xml:false,dataType:'html',url:this.href});$.get(this.href,{},function(data){if(data.search(/<title>(.+)<\/title>/i)) _uWnd.getbyname('ajax').setTitle(RegExp.$1);});return false;})</script>

Разберём принцип работы скрипта:




$('.ajax a').bind('click',function(){new _uWnd('ajax','Загрузка...',800,350,{closeonesc:1,autosize:1,autosizeonimages:1},{xml:false,dataType:'html',url:this.href});$.get(this.href,{},function(data){if(data.search(/<title>(.+)<\/title>/i)) _uWnd.getbyname('ajax').setTitle(RegExp.$1);});return false;})


$('.ajax a').bind('click',function()
- указывает, на то что внутри объекта с классом* ajax, при клике по
ссылке будут происходить следующие действие (что будет происходить
указано в скобках {}).

new _uWnd('ajax','Загрузка...',800,350,{closeonesc:1,autosize:1,autosizeonimages:1} - создаём аякс окошко.

xml:false,dataType:'html',url:this.href
- тут указываем на то, что загружаемый документ будет иметь формат
html, а не xml и ссылка на этот документ будет равняться значению
параметра href в ссылке (тут это this.href).

$.get(this.href,{},function(data){if(data.search(/<title>(.+)<\/title>/i))
_uWnd.getbyname('ajax').setTitle(RegExp.$1);}) - далее как мне
показалось, наиболее сложная часть скрипта. Мы ищем и получаем на
подгружаемой странице (this.href) содержимое тегов
<title>…</title> и записываем это содержимое в заголовок
аякс окна.

Ну и return false; - указываем на то, что
переход по самой ссылке производить не надо, без этой части скрипт
работать не будет, т. к. по мимо открытия аякс окна, будет ещё и
происходить переход по ссылке.

Автор скрипта: Бармалей


•    Получить ссылку

  В новом окне Просмотров:[635]Добавлено:20.06.2025 Подробнее