|
Вопросы от Винни
|
|
| [1] vinni [31.07.2014, 11:53] |
Здравствуйте!
Появилось несколько вопросов касательно юкоза... Сам их решить не смог, недели две наверное бьюсь. Вот решил написать.)
У меня есть несколько информеров. Каждый выводит последние материалы из всех активных модулей.
На все эти информеры распрострянется действие сортировщика, чтобы материалы шли в правильном порядке (ну, лента в общем).
Задача состоит в следующем. Как сделать общий переключатель по материалам информеров? То есть отсчиталось 30 материалов (как пример), последующие материалы обрубаются и доступны уже на другой, так сказать, странице.
Я прочел вот эту тему - http://likbezz.ru/forum/68-762-9581-16-1336339366 Круто, но сумел применить только к информерам по отдельности.
На всякий случай прикрепляю сортировщик:
Код <div id="feed">
$MYINF_1$
$MYINF_2$
$MYINF_3$
$MYINF_4$
$MYINF_5$
</div>
<script type="text/javascript">
function parseDate(input) {
var parts = input.match(/(\d+)/g);
return new Date(parts[2],parts[1]-1,parts[0],parts[3]-1,parts[4]-1,Math.random()).getTime();
}
$(document).ready(function() {
var elems = $.makeArray($('#feed .feed-item'));
elems.sort(function(a, b) {
if (parseDate($(a).find('.feed-date').text()) > parseDate($(b).find('.feed-date').text())) return -1;
if (parseDate($(a).find('.feed-date').text()) < parseDate($(b).find('.feed-date').text())) return 1;
return 0;
});
$('#feed').html(elems);
});
</script>
Обрамление даты в информере:
Код <span class="feed-date">$DATE$ в $TIME$</span>
Вишу на этом сайте с самого начала пребывания на юкозе. Просто кладезь знаний, спасибо. Надеюсь, что с моими вопросами тоже получится найти решение.) |
|
| [2] likbezz [01.08.2014, 11:53] |
vinni, Как сделать общий переключатель по материалам информеров? То есть отсчиталось 30 материалов (как пример), последующие материалы обрубаются и доступны уже на другой, так сказать, странице.
Ну, можно через табы - вкладки, ..
для этого нужен скрипт самих вкладок и модифицировать сортировщик, что бы он формировал html код для табов.
По сути - там должны быть управляющие элементы - список страниц, и блоки контента.
По завершению формирования кода, запускать скрипт вкладок.
Как-то так. |
|
| [3] vinni [01.08.2014, 14:10] |
likbezz, ура, вы пришли.)) Вчера заснул, так и не дождался.
Цитата Ну, можно через табы - вкладки, ..
для этого нужен скрипт самих вкладок и модифицировать сортировщик, что бы он формировал html код для табов.
По сути - там должны быть управляющие элементы - список страниц, и блоки контента.
По завершению формирования кода, запускать скрипт вкладок.
Поможете? Мне бы хоть самый простенький пример. Реально ничего не получается, как не пытался.( |
|
| [4] likbezz [01.08.2014, 15:16] |
vinni, Поможете? Мне бы хоть самый простенький пример
Ссылку на страницу с информерами, попробую ..) |
|
| [5] vinni [01.08.2014, 15:49] |
likbezz, вот наше чудовище.))
|
|
| [6] likbezz [02.08.2014, 12:34] |
vinni, Мне бы хоть самый простенький пример
Ну, типа так:
Управляющие элементы:
Код <a href="javascript://" onclick="$('#feed .cont').hide();$('#feed .cont').eq(0).show();return false;">1</a> <a href="javascript://" onclick="$('#feed .cont').hide();$('#feed .cont').eq(1).show();return false;">2</a> <a href="javascript://" onclick="$('#feed .cont').hide();$('#feed .cont').eq(2).show();return false;">3</a>
Построение блоков:
Код var elems = $.makeArray($('#feed .master_module_item')); elems.sort(function(a, b) { if (parseDate($(a).find('.feed-date').text()) > parseDate($(b).find('.feed-date').text())) return -1; if (parseDate($(a).find('.feed-date').text()) < parseDate($(b).find('.feed-date').text())) return 1; return 0; }); for(i=0,j=elems.length,html='<div class="cont">';i<j;i++){ if(i%30==0&&i!=0){ html+='</div><div class="cont hide '+i+'">'; } html+=$(elems[i]).wrap('<div />').parent().html(); if(i==j){ html+='</div>'; } } $('#feed').html(html);
☑ http://likbezz.ru/_example/_rest/_2014/p1/arkham-world_2.html |
|
| [7] vinni [03.08.2014, 01:16] |
likbezz, офигеть. оО Прям конкретно под наш сайт... Спасибо.))
Сейчас пробовать буду.) Немного позже отпишусь.Добавлено (02.08.2014, 20:28)
---------------------------------------------
likbezz, все, разобрался.)) Только одно не понял - как сделать, чтобы страница при переключении поднялась наверх (к верхним подгруженным материалам)? Добавлено (03.08.2014, 01:16)
---------------------------------------------
Блин. Ступил.
У нас точного количество материалов в каждом информере нет. То есть там может быть и 50 и 100 и больше. Сколько добавлено, столько и выводится (это первоначальная идея).
likbezz, можете показать как сделать так, чтобы были не переключатели, а кнопка "Подгрузить еще"? И так до тех пор, пока не кончаться материалы в информерах.
Извините, что не сразу донес мысль. Только сейчас дошло, что придется вручную добавлять переключатели страниц (в зависимости от увеличения объема материала).
Хотя сам виноват, надо было правильно писать. Возможно, что "такую кнопку" делать дольше . Тогда бы просто решить проблему с "поднятием страницы наверх".) А то при переключении не очень удобно... |
|
| [8] likbezz [03.08.2014, 14:18] |
vinni, likbezz, можете показать как сделать так, чтобы были не переключатели, а кнопка "Подгрузить еще"? И так до тех пор, пока не кончаться материалы в информерах.
ok
ближе к вечеру.. |
|
| [9] likbezz [03.08.2014, 22:57] |
vinni, likbezz, можете показать как сделать так, чтобы были не переключатели, а кнопка "Подгрузить еще"? И так до тех пор, пока не кончаться материалы в информерах.
Кнопка:
Код <a href="javascript://" onclick="nextBox(this);return false;"><b>Подгрузить еще</b></a>
Функция:
Код function nextBox(a){
var e=$('#feed .hide:hidden');
if(e){
$(e[0]).show();
}
if(e.length==1){
$(a).remove();
}
};
☑ http://likbezz.ru/_example/_rest/_2014/p1/arkham-world_3.html |
|
| [10] vinni [04.08.2014, 01:03] |
likbezz, большое спасибо!! Просто супер. Знал, что здесь точно помогут.
Вот... Из "накипевшего" у меня осталось два вопроса. Задам сначала самый идиотский (вам странным образом удалось сделать так, что вы единственный в сети у кого мне не стремно просить помощи. оО)
Есть скрипт (не мой):
Код var curstate = location.href;
function apoloadme(id, url) {
if($('div.apoloadfull' + id).html() == '') {
if(curstate != url) {
history.replaceState(null, null, url);
}
$('#loader' + id).fadeIn();
$('div.apoloadfull' + id).load(url + ' #apoentry', function() {
$('img[id^="loader"]').hide();
$('div#apoent' + id).hide(0);
$('div.apoloadfull' + id).fadeIn(100);
});
}
else
{
history.replaceState(null, null, curstate);
$('img[id^="loader"]').hide();
$('div.apoloadfull' + id).html('').hide();
$('div#apoent' + id).fadeIn(300);
}
}
////
Далее "обертки" и кнопка вызова:
MESSAGE на странице материала загоняем в
Код <div id="apoentry">$MESSAGE$</div>
В виде материалов ставим
Код <span onclick="apoloadme('$ID$', '$ENTRY_URL$');return false;">$TITLE$</span> <img src="/images/ajax-loader.gif" id="loader$ID$" style="display:none;" height="8px">
И там же MESSAGE заменяем на
Код <div id="apoent$ID$">$MESSAGE$</div> <div class="apoloadfull$ID$"></div>
////
Да... Вроде все.
////
Как заставить это "не подгружать", а "выводить" новое аякс окно с "подгруженным" материалом? Не могу. Думал, что ничего сложного, а капец какой-то.
Понятно, что материал подгружается в блок
Код <div class="apoloadfull$ID$"></div>
И насколько я понял за "подгрузку" отвечает вот эта часть кода
Код if($('div.apoloadfull' + id).html() == '') {
if(curstate != url) {
history.replaceState(null, null, url);
}
Но ничего изменить так и не удалось, сколько не ковырял. Аякс окно не открывается.
Получилось сделать альтернативу с гет-запросом. Но гетов на сайте и так хватает и вообще... Совсем не то.( Очень жду помощи. |
|
| [11] likbezz [04.08.2014, 06:22] |
vinni, Получилось сделать альтернативу с гет-запросом. Но гетов на сайте и так хватает и вообще...
Данный скрипт использует гет запрос.
И насколько я понял за "подгрузку" отвечает вот эта часть кода
Нет, вот эта:
Код $('div.apoloadfull' + id).load(url + ' #apoentry', function() {
$('img[id^="loader"]').hide();
$('div#apoent' + id).hide(0);
$('div.apoloadfull' + id).fadeIn(100);
});
а именно, функция $.load()
Цитата Info .load()
Осуществляет запрос к серверу без перезагрузки страницы. Полученные от сервера данные будут автоматически помещены внутрь выбранных элементов. Функция имеет несколько необязательных параметров.
.load() является наиболее простым средством для подгрузки и вставки недостающего содержимого с сервера. Он делает ajax-запрос к серверу и вставляет полученные данные в элементы страницы, к которым применялся метод
...
Но ничего изменить так и не удалось, сколько не ковырял. Аякс окно не открывается.
Вместо
Код $('div.apoloadfull' + id).fadeIn(100);
пихаем код открытия окошка, типа:
Код new _uWnd('New1','Моё окно 1',500,300,{autosize:1,maxh:300,minh:100},$('div.apoloadfull' + id).html());
где вместо контента указывает блок с подгруженным кодом.
...
И насколько я понял за "подгрузку" отвечает вот эта часть кода
Данная часть просто проверяет наличие подгруженного контента, и заменяет историю. |
|
| [12] vinni [04.08.2014, 09:23] |
Цитата Данный скрипт использует гет запрос.
Цитата а именно, функция $.load()
Цитата Данная часть просто проверяет наличие подгруженного контента, и заменяет историю.
Мда... *Чешет затылок*. Ну, ладно. Какие наши годы. хд Зато вкуривать работу скрипта наконец начал.
Цитата пихаем код открытия окошка, типа:
Все, дошло.)) Спасибо.)
Пошел устанавливать это все и любоваться.) Скоро вернусь с нашей третьей Ахиллесовой пятой.))Добавлено (04.08.2014, 09:23)
---------------------------------------------
likbezz, а можно к функции закрытия аякс-окна (http://arkham-world.ru/snimok.png) привинтить события onclick-а этой кнопки
Код onclick="apoloadme('$ID$', '$ENTRY_URL$');return false;"
?
Или так (первый вариант мне кажется "черной магией"):
Как под каждым подгруженным материалом в аякс-окно - вставить кнопку
Код <span onclick="apoloadme('$ID$', '$ENTRY_URL$');return false;">Закрыть</span>
Просто первоначально скрипт подразумевал закрытие новости по повторному щелчку по названию. И если просто закрыть аякс-окно, адрес подгруженного материала так и остается в адресной строке... Ох.( |
|
| [13] likbezz [04.08.2014, 09:52] |
vinni, а можно к функции закрытия аякс-окна (http://arkham-world.ru/snimok.png) привинтить события onclick-а этой кнопки
Можно.
Типа:
Код new _uWnd('New1','Моё окно 1',500,300,{autosize:1,maxh:300,minh:100,onbeforeclose:function(){apoloadme(id,url);}},$('div.apoloadfull' + id).html());
Подробно о создании uWnd (аякс) окошек (примеры реализации) |
|
| [14] vinni [04.08.2014, 22:54] |
likbezz, нашел.
Цитата функция, выполняющаяся после закрытия окна.
Блин. Пробую, но пока тщетно.Добавлено (04.08.2014, 09:52)
---------------------------------------------
likbezz, как раз писал.)) Добавлено (04.08.2014, 09:54)
---------------------------------------------
likbezz, likbezz, вооот... Кайф. Теперь идеал. Добавлено (04.08.2014, 22:54)
---------------------------------------------
likbezz, ура. Закончил с лентой.)
Вот и третья наша проблема...
Скрипт
Код function offset(a) {
for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
return b
}
var s = !0;
window.onload = function () {
var a = document.querySelector(".utility_bar"),
b = offset(a),
f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
d = a.offsetHeight + parseInt(f.marginTop) || 0,
e = offset(document.querySelector(".shoes"));
window.onscroll = function () {
var c = window.pageYOffset || document.documentElement.scrollTop,
c = e - (c + d + b);
s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") : (a.style.top = e - d + "px", a.style.position = "absolute"))
}
};
Стили (на всякий)
Код .utility_bar {
position: fixed;
width: 100%; min-width: 1010px;
height: 50px;
bottom: 0; left: 0;
background: rgba(5, 5, 5, 0.80);
border-top: 1px solid #252525;
z-index: 111;
}
.utility_bar .utility_bar_content {text-align: center;}
.utility_bar .utility_bar_content a {
position: relative;
display: inline-block;
padding: 0 20px;
background: url(/AW_v5/img/header_main_menu_sep.png) no-repeat right 16px;
font: 18px Georgia, serif; line-height: 50px; text-shadow: 0 0 3px #000; color: #e5e5e5; text-decoration: none;
}
.utility_bar .utility_bar_content a.bn {background: none;}
.utility_bar .utility_bar_content a:hover {color: #B22222;}
.utility_bar .utility_bar_content a img {vertical-align: middle;}
Сам блок
Код <div class="utility_bar"> <div class="utility_bar_content"> <a class="bn" href="/">ссылка</a> <a href="/">ссылка</a> <a class="bn" href="/">ссылка</a> </div></div>
Суть в том, чтобы абсолютно позиционированный блок замирал над футером. И все хорошо, но при смене высоты страницы (а это дело плевое... Добавил коммент - уже новая высота) скрипт фиксируется на месте, где стоит и дальше никуда. Так и висит там. Исправить не удалось. Не понимаю как сделать так, чтобы скрипт принимал и новую высоту страницы... Скорее всего вообще неправильно подхожу к решению вопроса.(
likbezz, подскажите пожалуйста, как починить? |
|
| [15] likbezz [05.08.2014, 22:30] |
vinni, подскажите пожалуйста, как починить?
Все то, что в onload продублировать в onscroll
.. |
|