• Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Замена переключателей бесконечной "простыней" (Меняем переключатели страниц на "простыню" как Вконтакте)
Замена переключателей бесконечной "простыней"
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 1 | 19:15:31
Здравствуйте!
Наверное, не только мне интересна данная тема. Давайте общими усилиями разберемся и напишем соответствующий скрипт? Ну или просто помогите мне smile

1. Удаляем код переключателей страниц в категориях. У нас остается таким образом одна заглавная страница для каждой категории.

2. В категории оборачиваем подгружаемый контент тегом span и присваиваем ему класс - lenta.
< span class="lenta">$Body$</span >

3. Внизу страницы, там где обычно размещаются переключатели страниц, создаем пустой блок, в который будет загружаться очередная страница:
<div id="lenta_podgruzka"></div>

4. Там же внизу страницы создаем кнопку-ссылку "Показать еще..." или "Показать больше материалов..."

5. Для этой ссылки пишем скрипт, который будет подгружать контент.
$('div#lenta_podgruzka').load('УРЛ.lenta')

И вот здесь нужна ваша помощь. Как сформировать данный УРЛ чтобы все получилось?

Допустим, урл категории "Полезное" имеет вот такой вид:
http://www.funnybottle.ru/publ/poleznoe/5
Значит, можно написать вот так?
$ENTRY_TITLE$-2-2
то есть:
$('div#lenta_podgruzka').load('$ENTRY_TITLE$-2-2.lenta')
При этом должна загрузиться вторая страница в пустой блок <div id="lenta_podgruzka"></div>

Но что делать со следующей страницей? Как загрузить третью, четвертую и т.д.?
Очевидно нужно прописать условие, что-то вроде: $ENTRY_TITLE$-(имеющееся значение+1)-2.
А дело еще осложняется тем, что первая страница категории имеет вид:
http://www.funnybottle.ru/publ/poleznoe/5
А последующие:
http://www.funnybottle.ru/publ/poleznoe/5-2-2
http://www.funnybottle.ru/publ/poleznoe/5-3-2
http://www.funnybottle.ru/publ/poleznoe/5-4-2
и так далее...

Что же делать? smile

Кстати, стандартные переключатели страниц умеют формировать ссылку на следующую страницу, вот только эти ссылки не имеют своих уникальных классов, поэтому вытянуть ссылку оттуда не получается sad
------
Хотя есть вот такой вот код, который содержит номер текущей страницы:
<b class="swchItemA"><span>2</span></b>
Нужно как-то взять это значение, прибавить к нему единичку и вставить в скрипт:
$('div#lenta_podgruzka').load('$ENTRY_TITLE$-ВСТАВИТЬ СЮДА-2.lenta')
и тогда все заработает. Но как это сделать?
-----
Лучше использовать вот этот код: $CAT_URL$ который дает одинаковую ссылку на всех страницах категории. Так что большое количество проблем сразу уходит. Теперь к данной ссылке надо добавлять 2-2, 3-2, 4-2 и так далее

Для того чтобы добавить единичку к текущей странице, наверно, можно использовать условные операторы? Например, код <? 3+2 ?> выведет 5.
То есть, нужно написать следующее:
$CAT_URL$-<? номер текущей страницы+1 ?>-2
Но как? Где взять номер текущей страницы? Например, он отображается в стандартных переключателях юкоз в таком виде:
<b class="swchItemA"><span>номер текущей страницы</span></b>
Зная уникальный класс "swchItemA", наверно, можно вытащить оттуда это значение и использовать его для скрипта? Подскажите, как конкретно это сделать?
Сообщение отредактировал Solaris(Olga) - Вторник, 04 Июн 2013, 03:26:40
SOCHI1014
Сообщений: 863
Репутация: 229

Сообщение # 2 | 19:30:57
Цитата (Solaris(Olga))
$('div#lenta_podgruzka').load('$ENTRY_TITLE$-<a href="javascript://" rel="nofollow" onclick="spages('id');return false;>.lenta')

А если вставить скриптом?

Сообщение отредактировал SOCHI1014 - Понедельник, 03 Июн 2013, 19:47:26
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 3 | 20:10:08
эх, так не получается.
------
На данный момент есть следующее:

<span class="lenta">$BODY$ </span>
<div id="lenta_podgruzka"></div>
<a href="#" onclick="$('div#lenta_podgruzka').load('$CAT_URL$-2-2 .lenta'); return false;">Загрузить еще...</a>

Этот код вставляется в каталог статей, а именно на страницу категорий. При этом, после статей появляется ссылка "Загрузить еще...". Если щелкнуть по ней, без проблем подгружается вторая страница.
Теперь задача стоит подгрузить другие страницы... может быть сделать счетчик? То есть каждый клик по ссылке добавлял бы единичку. Тогда все бы идеально заработало. Как-то так:
$CAT_URL$-2-2
$CAT_URL$-3-2
$CAT_URL$-4-2
И так далее. То есть в идеале, счетчик должен видоизменять ссылку, добавляя единицу при каждом клике. Но как это сделать не представляю... ну то есть понятно, что надо создать переменную var и при событии onclick записывать что var=var+1 или ++var. Но может кто-то поможет с конкретной реализацией?
---
Если вам не понятно о чем это тут много буков smile посмотрите на сайте наглядно. Вот: http://www.funnybottle.ru/publ/zhivotnye/2 в самом низу страницы, после материалов есть ссылка "Загрузить еще...". Нажмите - тут же подгрузится следующая страница под имеющиеся материалы.
Эта ссылка имеет вид, грубо говоря - $CAT_URL$-2-2. Для того, чтобы подгружать остальные страницы нужен скрипт-счетчик, который смог бы добавлять единичку в эту ссылку, как я писала выше (выделено красным).
Сообщение отредактировал Solaris(Olga) - Понедельник, 03 Июн 2013, 20:57:22
JonMagon
Сообщений: 2291
Репутация: 1828

Сообщение # 4 | 20:32:18
Solaris(Olga), ничего не понял, но очень понравилось.

Не оказываю поддержку посредством ЛС/ICQ/Skype/AIM/XMPP/E-mail.
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 5 | 01:16:11
Все получилось. Привожу пример рабочего кода для главной страницы каталога статей.

1. Оборачиваем боди тегом спан и присваиваем ему класс лента.
Код
<span class="lenta">$BODY$</span>


2. Сразу после боди создаем несколько блоков, в которые будут подгружаться страницы:
Код
<div id="lenta_podgruzka"></div>
<div id="lenta_podgruzka2"></div>
<div id="lenta_podgruzka3"></div>


3. После блоков создаем ссылку вида:
Код
<a href="$MODULE_URL$0-1" onclick="return transformUrl(this);">Еще</a>

4. После всего этого пишем скрипт:
Код
<script type="text/javascript">
function transformUrl(a){
var href = a.href;
var ar = href.split('-');
var basic = ar[0];
var Numb1 = +ar[1];
Numb1++;
a.href = basic+'-'+Numb1;
$('div#lenta_podgruzka'+Numb1+'') .load(a.href+' .lenta');
return false; //не удаляем
}
</script>


Добавлено (04 Июн 2013, 01:16:11)
---------------------------------------------
Работает замечательно. Но надо доработать в нескольких аспектах.

1. В частности, приходится вручную создавать пустые блоки по количеству имеющихся страниц, что не очень хорошо. Например, у меня на сайте пока 10 страниц по 10 материалов на каждой. Соответственно надо создать 10 пустых блоков. Это еще ничего. А если будет 100 или 1000 страниц? Как решить эту проблему? Может быть кто-то подскажет? Нужно динамически создавать блоки с порядковыми номерами. Я в такие дебри еще не влезала.

2. Хотелось бы чтобы подгрузка контента происходила автоматически, без необходимости нажимать на кнопку "Еще". При этом лучше, чтобы подгрузка начиналась заранее, когда человек промотал страницу на две трети, а не до конца. В этом случае не нужно будет ждать этой загрузки - пока просматриваешь последние несколько материалов, уже загрузилась следующая порция.
Как это сделать? Может кто-то знает и может подсказать?

3. В самый первый добавленный материал, то есть в самый старый нужно добавить скрипт, который бы убирал кнопку "Еще".
--------
Как все это работает, наглядно можно посмотреть на сайте: http://www.funnybottle.ru/
Сообщение отредактировал Solaris(Olga) - Вторник, 04 Июн 2013, 01:20:54
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 6 | 20:16:54
На скорую руку. Вместо боди. Вечером допишу если настроение и время будет.
Код
<span id="lenta">$BODY$</span>
<div id="more1"></div>
<div id="ShowMore" pagenum="1">Еще</div>
<script type="text/javascript">
$(window).scroll(function()     
{
         if  ($(window).scrollTop() == $(document).height() - $(window).height())     
         {
             var $showclick = $('#ShowMore').attr('pagenum');
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>')
$('#more'+$showclick).load('$HOME_PAGE_LINK$publ/0-'+(parseInt($showclick)+1)+' #lenta',function(){
        $('#ShowMore').attr('pagenum',parseInt($showclick)+1);
        };);
         }
};);
</script>


Добавлено (04 Июн 2013, 20:16:54)
---------------------------------------------
Готово. Проверил в Опере Фаере и Экплорере. Должно работать во всех модулях сайта.
Код
<span id="lenta">$BODY$</span>
<div id="more1"></div>
<div id="ShowMore" pagenum="1">Еще</div>
<div style="display:none;">$PAGE_SELECTOR$</div>
<script type="text/javascript">
// Скрипт написан JacksonMihailov на forum.ucoz.ru
   $(document).ready(function() {
<?if($URI_ID$!=<?substr('puMain',-4)?>)?> //   
var CatId = ('$URI_ID$'.replace(/[^0-9]/gi, ''))
<?endif?>
var LstPage = $($(".swchItem").get($(".swchItem").length-2)).text()
$(window).scroll(function() {
       if  ($('#ShowMore').attr('pagenum') < LstPage) {
       if  ($(window).scrollTop() == $(document).height() - $(window).height())   
       {
           var $showclick = $('#ShowMore').attr('pagenum');
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>')
$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/<?if($URI_ID$!=<?substr('puMain',-4)?>)?>'+CatId+'-<?endif?>0-'+(parseInt($showclick)+1)+' #lenta',function(){
      $('#ShowMore').attr('pagenum',parseInt($showclick)+1);
      };);
       }     } };); };);
</script>

jmDB - Текстовая база данных для uCoz
Сообщение отредактировал JacksonMihailov - Вторник, 04 Июн 2013, 23:13:06
aton4832
Сообщений: 19
Репутация: 0

Сообщение # 7 | 20:21:37
Добрый день вы меня Извините но Зачем он нужен?

http://www.kevn.ru/
http://ghostbusters.ucoz.ru/
http://timoshin.ucoz.ru/
http://timoshin1.com/
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 8 | 22:52:34
JacksonMihailov, у меня не работает ни один из вариантов. эх...

aton4832, преимуществ можно найти много.
- пользователи просматривают больше материалов, потому что неохотно переходят по ссылкам - 1.2.3.4.
- увеличивается время проведенное на сайте за счет пользователей, которые пришли просмотреть всего одну страницу. страница в данном случае очень большая)))
- информация загружается в разы быстрее и приятнее, чем если бы приходилось кликать на переключатели. Фактически, это происходит почти незаметно, если правильно сделать.
- пользователю остается лишь крутить колесико и ставить лайки по ходу дела. а все исследования показывают, что в таком случае (когда что-то легко), это используют с большей охотой, чаще и дольше. что сложнее хоть на клик используют уже реже, меньше и не охотнее. при прочих равных условиях, конечно.
и т.д.
Сообщение отредактировал Solaris(Olga) - Вторник, 04 Июн 2013, 22:57:53
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 9 | 23:09:34
Solaris(Olga), второй вариант работает. только этот кусок

Код
$('#more'+$showclick).load('http://top-arena.ucoz.lv/$MODULE_ID$/
надо написать так

Код
$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/


и кнопку ещё нужно выпилить ибо не нужна. а контент подгружается с малой задержкой надо колесико вниз прокрутить чуть и пойдет

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 10 | 23:12:42
Solaris(Olga), Честно говоря, странно, проверил еще раз на другом сайте, работает. В каком именно модуле вы хотите это использовать?

Добавлено (04 Июн 2013, 23:12:42)
---------------------------------------------
webanet, Вот черт, забыл. Сейчас изменю


jmDB - Текстовая база данных для uCoz
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 11 | 23:26:56
JacksonMihailov,
Цитата
<div id="ShowMore" pagenum="1">Еще</div>
вот это можно выпилить. оно не нужно

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 12 | 23:29:02
JacksonMihailov, а для какого модуля тестировали и какая подключена версия jquery? Не хочет он упорно запускаться.... даже не знаю, в чем дело.
http://www.funnybottle.ru/

сейчас буду разбираться.
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 13 | 23:36:43
webanet, У меня все больше такое чувство, что я скопировал не тот вариант.))) Точно помню, что и ссылки менял, и этот div удалял. Странно

Добавлено (04 Июн 2013, 23:36:43)
---------------------------------------------
Solaris(Olga), Видимо вы в материал вставили. Надо в
Главная страница каталога статей
Страница со списком материалов раздела
Страница со списком материалов категории
вместо $BODY$

Код
<span id="lenta">$BODY$</span>
<div id="more1"></div>
<div id="ShowMore" pagenum="1"></div>
<div style="display:none;">$PAGE_SELECTOR$</div>
<script type="text/javascript">
// Скрипт написан JacksonMihailov на forum.ucoz.ru
     $(document).ready(function() {
<?if($URI_ID$!=<?substr('puMain',-4)?>)?> //     
var CatId = ('$URI_ID$'.replace(/[^0-9]/gi, ''))
<?endif?>
var LstPage = $($(".swchItem").get($(".swchItem").length-2)).text()
$(window).scroll(function() {
         if  ($('#ShowMore').attr('pagenum') < LstPage) {
         if  ($(window).scrollTop() == $(document).height() - $(window).height())     
         {
             var $showclick = $('#ShowMore').attr('pagenum');
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>')
$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/<?if($URI_ID$!=<?substr('puMain',-4)?>)?>'+CatId+'-<?endif?>0-'+(parseInt($showclick)+1)+' #lenta',function(){
        $('#ShowMore').attr('pagenum',parseInt($showclick)+1);
        };);
         }     } };); };);
</script>

jmDB - Текстовая база данных для uCoz
Сообщение отредактировал JacksonMihailov - Вторник, 04 Июн 2013, 23:43:56
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 14 | 23:41:54
JacksonMihailov, ага. точно) не тот вариант. див удалять не надо. слово ещё пилить надо. эта строчка нужна

<div id="ShowMore" pagenum="1"></div>

Solaris(Olga), доктип ваш вполне подходит. а версия библиотечки в данном случае не критична и на 1.6 можно и на 1.7

у вас как раз эта строчка и отсутствует

Код
<div id="ShowMore" pagenum="1"></div>

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
JacksonMihailov
Сообщений: 259
Репутация: 107

Сообщение # 15 | 23:46:12
Да, да.. забыл. Извиняюсь, мозг кипит. Сейчас пытаюсь продумать браузерную игру на укозе, и да, голова забита.
Solaris(Olga), Работает?
вот 100% правильный )) еще раз прошу прощения за головную боль.
Код
<span id="lenta">$BODY$</span>
<div id="more1"></div>
<div id="ShowMore" pagenum="1"></div>
<div style="display:none;">$PAGE_SELECTOR$</div>
<script type="text/javascript">
// Скрипт написан JacksonMihailov на forum.ucoz.ru
     $(document).ready(function() {
<?if($URI_ID$!=<?substr('puMain',-4)?>)?> //     
var CatId = ('$URI_ID$'.replace(/[^0-9]/gi, ''))
<?endif?>
var LstPage = $($(".swchItem").get($(".swchItem").length-2)).text()
$(window).scroll(function() {
         if  ($('#ShowMore').attr('pagenum') < LstPage) {
         if  ($(window).scrollTop() == $(document).height() - $(window).height())     
         {
             var $showclick = $('#ShowMore').attr('pagenum');
$('#more'+$showclick).after('<div id="more'+(parseInt($showclick)+1)+'"></div>')
$('#more'+$showclick).load('$HOME_PAGE_LINK$$MODULE_ID$/<?if($URI_ID$!=<?substr('puMain',-4)?>)?>'+CatId+'-<?endif?>0-'+(parseInt($showclick)+1)+' #lenta',function(){
        $('#ShowMore').attr('pagenum',parseInt($showclick)+1);
        };);
         }     } };); };);
</script>

jmDB - Текстовая база данных для uCoz
Сообщение отредактировал JacksonMihailov - Вторник, 04 Июн 2013, 23:47:05
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Замена переключателей бесконечной "простыней" (Меняем переключатели страниц на "простыню" как Вконтакте)
  • Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Поиск: