» »

Переключатель страниц с подгрузка контента uCoz


Когда мы видим что переключателей нет на сайте, а просто кнопка, то нажимаем и появляется следующие файлы или статьи. Это отличное решение где мы переключатели страниц, меняем на подгрузка контента. Это мы можем увидеть на социальном сайте В контакте, просто все в низ будет идти. Что по индексации, то все будет по стандартному, здесь вы сколько выставили материала на страницу, то столько и появиться, только не листать будете, а все в низ идти будет. Кому то это нравиться, так как просто крутим и в тоже время смотрим, что вам нужно, да и согласитесь, смотрится очень оригинально.

Установка:

Скачиваем архив и заливаем папку page_selector в файловый менеджер вашего сайта.

Далее заходим в ПУ - Управление дизайном - Главная страница каталога файлов и между ставим скрипт:

Код
<script type="text/javascript" src="/page_selector/js.js"></script>


Потом нам нужно поменять $B0DY$ на этот скрипт.

Код
<div id="contik">$BODY$</div>


И опять там же заменяем $PАGE_SELECTOR$ на код.

Код
<center>  
  <div class="weselector">  
  <div class="selector1">  
  $PAGE_SELECTOR$  
  <a href="javascript://" onclick="$('.weselector').slideToggle(); setCookie('cokContik',1,365);"><div class="changeselector">Сменить переключатель</div></a>  
  </div>  

  </div>  

  <div class="weselector" style="display:none;">  
  <div class="selector2">  
  <div style="display:none;" id="selector">$PAGE_SELECTOR$</div>  
  <a href="javascript://" onclick="$('.weselector').slideToggle(); eraseCookie('cokContik');"><div class="changeselector">Сменить переключатель</div></a>  
  </div>  

  </div>  
  <script type="text/javascript">  
  if(getCookie('cokContik')){$('.weselector').slideToggle();}  
  if ($("#selector").find(".swchItem:contains('»')").text() == '»') {  
  $("#selector").after('<br><div id="nextCont"><div onclick="Conti.to();" style="cursor:pointer;"><b>Еще материалы</b></div></div>');  
  };  
   
  Conti = {  
  to:function(){  
  $("#nextCont").html('<div><img src="/page_selector/img.gif" border="0" /></div>');  
  nextik = $("#selector").find(".swchItem:contains('»')").attr('onclick').toString();  
  num = nextik.match(/\d/);  
  $.get('/load/0-'+num, function(next){  
  $("#contik").append( $("#contik", next).html() );  
  $("#selector").html( $("#selector", next).html() );  
   
  $("#nextCont").html('<div onclick="Conti.to();" style="cursor:pointer;"><b>Еще материалы</b></div>');  
  if ($("#selector", next).find(".swchItem:contains('»')").html() == null) { $("#nextCont").fadeOut(); };  
  });  
  }  
  }  
  </script>  
  </center>


И ставим CSS стили:

Код
.weselector {background:#ffffa0; text-align:center; border:1px solid #ffc040; height:55px; width:565px;}  
.weselector a {text-decoration: none;}  
.selector1 {padding:13px; font-size:12px; color:#ff4500; text-shadow:0px 1px 0px #fff;}  
.selector2 {font-size:13px; color:#ff4500; text-shadow:0px 1px 0px #fff;}  
.changeselector {font-size:10px; color:#ff4500;}


Все на этом установка закончена, перезагружаем сайт или страницу и смотрим как работает, это под файлы сделаны, чтоб не забывали, и можно потом что то подкорректировать, что вам нужно.
25.03.2016 Загрузок: 1 Просмотров: 387 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
tsakonter
tsakonter 25.03.2016 17:431
0
Тема интересная, и на сайте что то по функциям измениться, дело второе, а надо, если все работает, и все привыкли к переключателю.
Kosten
Kosten 25.03.2016 17:542
0
Но здесь каждый решит, поменять что то на сайте или нет, так как думаю, это не просто функция, а также элемент дизайн.
avatar