Здравствуйте.
В этой публикации, как можно догадаться по заголовку, речь пойдет об аякс-подгрузке.
Все описанное ниже применимо для дефолтного шаблона, для кастомного переделать нетрудно, все зависит от индивидуальных умений.
Предвосхищая комментарии: файлов для скачивания не будет, только инструкция.
Итак, начнем.
Сперва открываем файл \components\content\frontend.php, на 122 строчке, после
$inDB->limitPage($page, $model->config['perpage']);
$page = $_POST['ajax_page']; $perpage = $model->config['perpage']; $inDB->limitPage($page, $perpage); }
$(document).ready(function() { if ($('.contentlist').length && $('.pagebar').length) { window.counter = 1; var allPages = $('.pagebar > *').last().attr('href').split('-'); var maxPage = allPages[allPages.length-1]; $(document).on('click', '.load_more_btn', function() { window.counter++; if (window.counter <= maxPage) { $.ajax({ url: window.location.pathname, data: {ajax_page:window.counter}, type: "POST", success: function(data) { var filterData = $(data).filter('table.contentlist').find('tbody').html(); $('.component table.contentlist tbody').append(filterData); }, complete: function() { if (window.counter == maxPage-1) { $('body').addClass('ajax-before-last-page'); } } }); } }); $(document).on('click', 'body.ajax-before-last-page .load_more_btn', function() { setTimeout(function () { $('.load_more_btn').hide(); $('body').removeClass('ajax-before-last-page'); }, 200); }); } });
В конце перед закрывающим {/if} прописываем html кнопки "Загрузить ещё"
<span class="load_more_btn">Загрузить ещё</span>
{$pagebar}
<div style="display: none;">{$pagebar}</div>
Переходим в \templates\_default_\css\styles.css, дабы прописать стили для недавно добавленной кнопки. Открываем, в конце пишем следующее:
.load_more_btn { display: table; font-size: 21px; color: #fff !important; text-decoration: none !important; padding: 12px 40px; line-height: 1; overflow: hidden; position: relative; box-shadow: 0 1px 1px #ccc; border-radius: 2px; background-color: #51b7e6; background-image: -webkit-linear-gradient(top, #51b7e6, #4dafdd); background-image: -moz-linear-gradient(top, #51b7e6, #4dafdd); background-image: linear-gradient(top, #51b7e6, #4dafdd); border: 1px solid #51b7e6; margin: 20px auto 10px; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; } .load_more_btn:hover { opacity: 0.7; } .load_more_btn:active { opacity: 0.85; }
На этом по аяксу всё
События, на которые подгружать материалы — по сроллу или на клик, как здесь — выбор сугубо индивидуальный, равно как и стилизация, потому может требовать доработок под личные вкусы. Здесь Вы вольны, полагаясь на персональные навыки.
Ну и, как обычно, демо — клик.
Спасибо за внимание.
Реклама #
Def 8 лет назад #
Pasha 8 лет назад #
Def 8 лет назад #
Джехутимери 8 лет назад #
У Олега Васильевича хорошее решение, но на примере представлен виджет.
Если для элементов раздела решения пока нету, то можно и нужно сделать.
Pasha 8 лет назад #
Джехутимери 8 лет назад #
Спасибо.
letsgo 8 лет назад #
Джехутимери 8 лет назад #
Но: ссылки на страницы есть в блоке display:none, поисковики их отлично увидят.
Например, последняя, 9-я страница: http://demo.guitarist.pp.ua/stati/marketing/page-9 .
Нил™ 8 лет назад #
Джехутимери 8 лет назад #
Переделать этот момент под себя, условие, при котором увеличивать счетчик.
Если на скролл, то например так:
$(document).on('scroll', function() {
if ($(document).height() >= $(document).height() - $(window).height()) {
...
}
});
Сугубо индивидуально, как писал в посте. Здесь уже дело за тем. кто решит воспользоваться.
ValeraK 8 лет назад #
scanread 8 лет назад #
Ї Ђãîķℳāŋ Ї 7 лет назад #