Довольно простая концепция. У меня есть разбитый на страницы источник данных, который подает содержимое на стену из кладки в блоках 15. Я хочу надеть кнопку "Загрузить еще".
Нужно ли загружать все DS и исключать разбиение на страницы, а затем просто маскировать его с помощью jQ? Похоже, он может стать лагги?
Как подключить эту функцию? Чтобы подавать только на выход XML, если он запросил? Я попытался кратко взять существующую кнопку Append из документов кладки, но мой код заставил ее работать как ссылка на страницу "NaN"... Я не слишком много смешал XSL и jQuery. Не знаю, с чего начать.. Ниже мой код для кнопки.
<a href="{$root}/?page={/homepage-aritcles/pagination/@current-page + 1}"> <button id="append-button">++++ LOAD MORE POSTS ++++</button> </a>
Здесь относительный js:
function getItemElement() {
var elem = document.createElement('div');
elem.className = 'item ' ;
return elem;
}
$(function(){
var $container = $('.post.content'),
$boxes = $container.find('.item'),
firstTime = true;
$(window).smartresize(function(){
var containerWidth = $container.width(),
colWidth = Math.floor( containerWidth / 3 ),
applyStyleFnName = firstTime ? 'css' : 'animate';
$boxes.each(function(){
var $this = $(this),
cols = $this.data('cols'),
boxWidth = Math.floor( colWidth * cols );
$this[ 'css' ]({ width: boxWidth }, { queue: false });
});
$('#append-button').on( 'click', function() {
var elems = [ getItemElement() ];
$container.append( elems ).masonry( 'appended', elems );
});
Вы можете запросить вторую страницу результатов из вашего источника данных, установив параметр "Начало на странице" в переменную.
Итак, как вы написали "/? Page =" для вашего якоря, вы можете установить источник данных "start at page" на "{$ url- page}". Это можно сделать в пользовательском интерфейсе Symphony или путем редактирования вашего PHP файла источника данных.
Затем вы можете загрузить эту страницу с помощью ajax-запроса из jQuery.
Все параметры GET доступны на страницах Symphony как переменные, начинающиеся с "url-".
Вот базовый пример, вы хотите расширить его для таких вещей, как состояния загрузки и определения, нет ли загружаемых страниц.
Кнопка XSL (убедитесь, что она находится вне контейнера страницы ajax):
<a class="js-loadmore" data-current-page="{pagination/@current-page}" href="/?page={pagination/@current-page + 1}">Load More</a>
Page 1 разметка:
<div class="ajax-page">
<p>I'm on page 1<p>
</div>
Page 2 разметка:
<div class="ajax-page">
<p>I'm on page 2</p>
</div>
JS:
$('.js-loadmore').click(function(e) {
e.preventDefault();
var $btn = $(this),
page = $btn.data('current-page') + 1,
$dest = $('.ajax-page');
$.ajax({
url: '/?page=' + page,
success: function(data) {
// Find elements inside the container on the 2nd page and put them in the first page
$(data).find('.ajax-page').children().appendTo($dest);
// Update counter so subsequent clicks loads the next page
$btn.data('current-page', page);
}
});
});
После нажатия...
<div class="ajax-page">
<p>I'm on page 1<p>
<p>I'm on page 2<p>
</div>