Навигация по страницам с помощью 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]<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 код движка. Спасибо! |
Если я вас правильно понял, код будет примерно такой:
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');
|
Цитата:
Вроде да, всё правильно, сейчас попробую, единственное не совсем уверен что у Вас полностью заменился тег 'span' на тег 'a' , но я возможно ошибаюсь, не ас в jQuery P.S. Да, и я хочу чтоб это работало только в этом месте(не затрагивало другой код) правильно я понимаю что всё это нужно завернуть в:
jQuery(document).ready(function($) {
$('.pagination').each(function() {
Здесь Ваш код
});
});
Спасибо! |
Цитата:
http://api.jquery.com/unwrap/ Да, можно завернуть и так.... |
Прилагаю скрины
Цитата:
1. Что должно получится  2. Что получается  3. Скрин исходного кода  Тег "span" не поменялся... |
А можно увидеть код того, что получилось на скрине?
|
Цитата:
Вам HTML код? Если Вы имеете ввиду реализацию на jQuery то в исходнике всё сделано на HTML и CSS , а мне надо приделать это к DLE и чтоб не менять PHP исходники. |
Извиняюсь, в предыдущем коде была одна ошибка. Выкладываю окончательный вариант(прогнал у себя, всё работает):
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, либо я тут не помошник... |
Цитата:
Насчёт версии jQuery в DLE на сегодняшний момент если мне память не изменяет по моему 1.9 , так что всё ок. Сейчас протестирую как освобожусь..., у меня тут ещё пару мыслей появилось как это сделать, помучаюсь... :) |
Цитата:
Вместо scr надо src ведь??? |
Опечатка, ну это я так, для примера написал...
|
Цитата:
Сейчас проверил, вроде работает, но скрипт ко всем ссылкам с адресом a href="#"понимает их тоже к навигацию, щя гляну, может у меня какой косяк... Ещё раз спасибо! |
|
Готовый вариант для CMS DataLife Engine
Всем привет ещё раз!
В общем, ковырял-ковырял и наковырял... :) Думал велосипед изобрести, а пришлось сделать проще. Кому надо, вот готовый вариант для DataLife Engine. CSS код добавить к Вашим стилям, или создать новый и подключить его: Также нужны будут и шрифты с иконками, скачать можно тут свежую версию.
* {
margin: 0;
padding: 0;
}
/* Start pagination */
.pagination {
display: inline-block;
overflow: hidden;
text-align: center;
font-family: 'RobotoMedium', Arial, sans-serif;
font-size: 17px;
margin: 25px 0 5px 0;
}
.pagination span, .pagination a {
background-color: #f9f9f9;
float: left;
border-radius: 2px;
text-decoration: none;
margin: 5px 5px 0 0;
padding: 9px 14px;
}
.pagination, .pagination span, .pagination a {
color: #757575;
}
.pagination span.next-button, .pagination a.next-button, .pagination span.prev-button, .pagination a.prev-button {
background-color: #474747;
font-size: 28px;
padding: 2px 14px;
}
.pagination a.next-button, .pagination a.prev-button, .pagination span.current {
color: #FFF;
}
.pagination a.next-button:hover, .pagination a.prev-button:hover, .pagination a:hover, .pagination span.current {
background-color: #e7402f;
color: #FFF;
}
/* End pagination */
jQuery скрипт для пагинации:
/* Начало скрипта пагинации */
$('.pagination').each(function() {
$('.pagination').find('.icon-angle-left').parent().addClass('prev-button');
$('.pagination').find('.icon-angle-right').parent().addClass('next-button');
$('.pagination').find('span').addClass('current');
});
/* Конец скрипта пагинации */
HTML код для файла navigation.tpl шаблона в DataLife Engine:
<div class="pagination">
[prev-link]<i class="icon-angle-left"></i>[/prev-link]
{pages}
[next-link]<i class="icon-angle-right"></i>[/next-link]
</div>
У себя проверил, всё работает! Кому надо - меняйте как хотите. Вот пример того что у Вас должно получится. Всем удачи! |
| Часовой пояс GMT +3, время: 11:38. |