Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2013, 18:04
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Навигация по страницам с помощью jQuery
Всем привет!
В общем есть такой HTML код который нужно получить частично через jQuery:
<div class="pagination">
  <a class="prev-button" href="#"><i class="icon-angle-left"></i></a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="current" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a>...</a>
  <a href="#">11</a>
  <a href="#">12</a>
  <a href="#">13</a>
  <a class="next-button" href="#"><i class="icon-angle-right"></i></a>
</div>

Проблема в том что в CMS DataLife Engine в файле шаблона navigation.tpl вместо тега "a" выводится тег "span" , а если быть точнее там такая конструкция:
Код:
[prev-link]Назад[/prev-link]
{pages}
[next-link]Вперед[/next-link]
Которая будет выводить такой HTML код:
<div class="pagination">
  <a href="/">Назад</a>
  <a href="/">1</a>
  <span>2</span>
  <a href="/page/3/">3</a>
  <a href="/page/3/">Вперёд</a>
</div>

Где
<span>2</span>
это активный пункт навигации, который выводится кодом движка.
Я хочу получить конструкцию которую указал в самом начале через jQuery, не меняя исходные PHP коды движка.
Ещё один нюанс: вместо "Назад" и "Вперёд" будут выводится иконки со стрелочками влево и вправо соответственно.
Я попробовал сам решить проблему, но так как я слаб в jQuery не получается допилить, а именно: не получается заменить тег "span" тегом "a" которому ещё нужно присвоить класс ".current" когда пункт активен и удалить этот класс когда пункт не активен.
Вот что у меня получилось:
jQuery(document).ready(function($) {
  $('.pagination').each(function() {
    $('.icon-angle-left').parent().addClass('prev-button');
	$('.icon-angle-right').parent().addClass('next-button');
	/*
	 * И вот тут косяк...
	 * Вместо тега span нужен тег a и проверить, правильно ли я написал функцию.
	 */
	if ($('.pagination span').last()) {
	  $('.pagination span').first().addClass('current');
	}
  });
});

Прошу помочь реализовать указанную в начале HTML конструкцию с помощью jQuery, не меняя исходный PHP код движка.
Спасибо!

Последний раз редактировалось Designer, 25.08.2013 в 20:18.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2013, 19:00
Интересующийся
Отправить личное сообщение для DeD_Mazai Посмотреть профиль Найти все сообщения от DeD_Mazai
 
Регистрация: 25.08.2013
Сообщений: 20

Если я вас правильно понял, код будет примерно такой:
var content = $('.pagination').find('span').text();			//запомним номер пункта
$('.pagination').find('span').appendChild(document.createElement('a'));		//создадим 'a' и добавим в span
$('span > a')
		.attr('href','#')			//доводим до рабочего состояния
		.text(content)				//всталяем номер пункта
		.addClass('current');		//т.к. мы работаем со span, то по логике этот пункт полюбому активен
									//соответственно если пункт неактивен он неокажется в span
$('span > a').unwrap();		//заменяем span на a

А насчёт назад вперед...просто добавьте в нужные ссылки тег img примерно вот так:
$('a').appendChild(document.createElement('img'));
$('a > img').attr('scr','myimage.jpg');
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2013, 19:05
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Сообщение от DeD_Mazai Посмотреть сообщение
Если я вас правильно понял, код будет примерно такой:
Спасибо за ответ!
Вроде да, всё правильно, сейчас попробую, единственное не совсем уверен что у Вас полностью заменился тег 'span' на тег 'a' , но я возможно ошибаюсь, не ас в jQuery
P.S.
Да, и я хочу чтоб это работало только в этом месте(не затрагивало другой код) правильно я понимаю что всё это нужно завернуть в:
jQuery(document).ready(function($) {
  $('.pagination').each(function() {
Здесь Ваш код
  });
});

Спасибо!

Последний раз редактировалось Designer, 25.08.2013 в 19:08.
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2013, 19:31
Интересующийся
Отправить личное сообщение для DeD_Mazai Посмотреть профиль Найти все сообщения от DeD_Mazai
 
Регистрация: 25.08.2013
Сообщений: 20

Сообщение от Designer Посмотреть сообщение
не совсем уверен что у Вас полностью заменился тег 'span' на тег 'a'
развеять все сомнения...
http://api.jquery.com/unwrap/
Да, можно завернуть и так....
Ответить с цитированием
  #5 (permalink)  
Старый 25.08.2013, 19:58
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Прилагаю скрины
Сообщение от DeD_Mazai Посмотреть сообщение
развеять все сомнения...
Прилагаю скрины что получается:
1. Что должно получится

2. Что получается

3. Скрин исходного кода

Тег "span" не поменялся...

Последний раз редактировалось Designer, 25.08.2013 в 20:04.
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2013, 20:07
Интересующийся
Отправить личное сообщение для DeD_Mazai Посмотреть профиль Найти все сообщения от DeD_Mazai
 
Регистрация: 25.08.2013
Сообщений: 20

А можно увидеть код того, что получилось на скрине?
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2013, 20:09
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Сообщение от DeD_Mazai Посмотреть сообщение
А можно увидеть код того, что получилось на скрине?
Который мне нужно получить?
Вам HTML код? Если Вы имеете ввиду реализацию на jQuery то в исходнике всё сделано на HTML и CSS , а мне надо приделать это к DLE и чтоб не менять PHP исходники.

Последний раз редактировалось Designer, 25.08.2013 в 20:13.
Ответить с цитированием
  #8 (permalink)  
Старый 25.08.2013, 20:51
Интересующийся
Отправить личное сообщение для DeD_Mazai Посмотреть профиль Найти все сообщения от DeD_Mazai
 
Регистрация: 25.08.2013
Сообщений: 20

Извиняюсь, в предыдущем коде была одна ошибка. Выкладываю окончательный вариант(прогнал у себя, всё работает):
var content = $('.pagination').find('span').text();         //запомним номер пункта
	$('.pagination').find('span').empty();
	$('.pagination').find('span').append(document.createElement('a'));     //создадим 'a' и добавим в span
	$('span > a')
	        .attr('href','#')           //доводим до рабочего состояния
	        .text(content)              //всталяем номер пункта
	        .addClass('current');       //т.к. мы работаем со span, то по логике этот пункт полюбому активен
	                                    //соответственно если пункт неактивен он неокажется в span
	$('span > a').unwrap();


Одно НО - для работы метода unwrap() необходима jquery 1.4+ если и в этом случае несработает, то либо дело в CMS, либо я тут не помошник...
Ответить с цитированием
  #9 (permalink)  
Старый 25.08.2013, 20:55
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Сообщение от DeD_Mazai Посмотреть сообщение
Одно НО - для работы метода unwrap() необходима jquery 1.4+ если и в этом случае несработает, то либо дело в CMS, либо я тут не помошник...
Большое Вам человеческое спасибо!!!
Насчёт версии jQuery в DLE на сегодняшний момент если мне память не изменяет по моему 1.9 , так что всё ок.
Сейчас протестирую как освобожусь..., у меня тут ещё пару мыслей появилось как это сделать, помучаюсь...
Ответить с цитированием
  #10 (permalink)  
Старый 25.08.2013, 21:07
Аватар для Designer
Новичок на форуме
Отправить личное сообщение для Designer Посмотреть профиль Найти все сообщения от Designer
 
Регистрация: 31.07.2013
Сообщений: 9

Сообщение от DeD_Mazai Посмотреть сообщение
$('a > img').attr('scr','myimage.jpg');
А тут у Вас не опечатка?
Вместо scr надо src ведь???
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
выборка из MySQL с помощью PHP с использованием JQuery NataliMi jQuery 1 06.11.2012 23:13
Анимированные кнопки с помощью jQuery a_c jQuery 9 11.04.2011 18:55
Как с помощью JQuery проверить длину введенного сообщения? Bandicoot jQuery 1 13.03.2011 14:12
Как скруглить углы у картинки с помощью JQuery askel jQuery 5 08.05.2010 22:33
Авторизация в модальном окне с помощью jQuery A.N.R.I jQuery 17 01.03.2010 19:26